我正在尝试使用模板文字在 html 中显示来自 javascript 的文本，但元素未定义，我该怎么办？

Question

我试图在 html 的外部文本 div 中显示名称和选定的形状元素，但它们一直显示为未定义。

here is the Javascript


let ShapeLink = (function(){
//code here!

return {
    initForm: function(frm){
        //code here!
        frm.addEventListener('submit', function(){
          document.getElementById('name').name,
          document.getElementById('shapeSelect').option;
        })
      let display = document.getElementById('outputText').innerHTML = 
  `${this.name} wants to see a ${this.shapeSelect}`;
      console.log(display);
      display.innerHTML =`
        <div id="outputText">
        ${this.name} wants to see a ${this.shapeSelect}
        </div>`

    }
}
})()

这里是 html

<body>
<form>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="shapeSelect">Shape:</label>
    <select name="" id="shapeSelect">
        <option value="">pick a shape</option>
        <option value="square">Square</option>
        <option value="circle">Circle</option>
    </select>
    <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>
<script>
    ShapeLink.initForm(document.querySelector("form"));
</script>
</body>

请注意，我需要将所有代码添加到 Javascript 文件中

Answer 1

你应该把所有的 JavaScript 放在一起，没有必要让你的 main 函数成为全局函数。除此之外，依靠 this 会让你陷入痛苦的世界。由于您已经可以通过 frm 访问表单，您也可以直接访问它的 elements 属性以从您的表单中获取值：

document.addEventListener('DOMContentLoaded', function() {
  const ShapeLink = {
    initForm: function(frm) {
      frm.addEventListener('submit', function(event) {
        event.preventDefault();
        event.stopPropagation();
        let display = document.getElementById('outputText');

        display.innerHTML = `
          <div id="outputText">
            ${frm.elements.name.value} wants to see a ${frm.elements.shapeSelect.value}
          </div>
        `;
      });
    },
  };

  ShapeLink.initForm(document.querySelector('form'));
});

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="shapeSelect">Shape:</label>
  <select name="" id="shapeSelect">
    <option value="">pick a shape</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
  </select>
  <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>

Answer 2

用变量 value.Here 替换模板文字中的 this this 将指向 form。另外 document.getElementById('name').name, 将给出名称，但你可能需要输入的值 & document.getElementById('shapeSelect').option; 需要替换为 document.getElementById('shapeSelect').value;

表单有一个提交按钮，所以点击它会尝试提交表单。可以使用 event.preventDefault

来阻止表单的默认行为

let ShapeLink = (function() {
  var _name;
  var _selOption;
  return {
    initForm: function(frm) {
      frm.addEventListener('submit', function(e) {
        e.preventDefault();
        // get the value attribute
        _name = document.getElementById('name').value;
        _selOption = document.getElementById('shapeSelect').value;
        //check if name and selected option is not undefined
        if (_name && _selOption) {
          document.getElementById('outputText').innerHTML = `${_name} wants to see a ${_selOption}`;
        }

      })
    }
  }
}())
ShapeLink.initForm(document.querySelector("form"));

ShapeLink.initForm(document.querySelector("form"));

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="shapeSelect">Shape:</label>
  <select name="" id="shapeSelect">
    <option value="">pick a shape</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
  </select>
  <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>

我正在尝试使用模板文字在 html 中显示来自 javascript 的文本，但元素未定义，我该怎么办？

i am trying to use template literals to display text from javascript in html but the elements are undefined, what do i do?

javascript

html

template-literals