Javascript 附加代码未定义答案

【问题标题】：Javascript appended code comes as undefinedJavascript 附加代码未定义
【发布时间】：2022-01-21 05:12:24
【问题描述】：

我有这段代码，我从表单中获取提交并将其附加到 HTML。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }
    
    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  
<p>Submission Number: <a id="clicks">1</a>

  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
var clicks = 1;

  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');
    const submissions = document.getElementById('clicks');


    let data = [ 
      `<p>Name: ${name.value}</p>`, 
      `<p>Age: ${age.value}</p>`, 
      `<p>Email: ${email.value}</p>`,  
      `<p>Country: ${country.value}</p>`,  
      `<p>Message: ${msg.value}</p>`,  
      `<p>Submission No: ${submissions.value}</p>`];
 
   
    $('#output').append("<br />" + "<br />");

    data.forEach(line => $('#output').append(line));
clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
  }


</script>

</html>

在这段代码中，我想打印用户当前的提交编号。所以我做了一个点击计数器。

clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;

然后我尝试将它放入一个常量并附加它。

const submissions = document.getElementById('clicks');

但我在这里面临的问题是，当附加我的提交字段时，我的提交字段显示为Submission No: undefined。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

<a> 标签没有value 属性。您必须使用 textContent 或 innerText 来获取计数。

console.log(document.getElementById('clicks').textContent);

&lt;a id="clicks"&gt;2&lt;/a&gt;

【讨论】：

【解决方案2】：

您的 submissions 元素是一个锚 (<a>) 元素。这些 HTML 元素没有 value 字段。

您可以通过innerHTML 以与写入相同的方式读取该值。

例如

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }
    
    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  
<p>Submission Number: <a id="clicks">1</a>

  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
var clicks = 1;

  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');
    const submissions = document.getElementById('clicks');


    let data = [ 
      `<p>Name: ${name.value}</p>`, 
      `<p>Age: ${age.value}</p>`, 
      `<p>Email: ${email.value}</p>`,  
      `<p>Country: ${country.value}</p>`,  
      `<p>Message: ${msg.value}</p>`,  
      `<p>Submission No: ${submissions.innerHTML}</p>`]; // Use innerHTML here
 
   
    $('#output').append("<br />" + "<br />");

    data.forEach(line => $('#output').append(line));
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }


</script>

</html>

通常您当然也可以直接插入clicks 变量（而不是a 元素的内容）。

注意将用户输入呈现到 HTML 中是非常不安全的。它会为恶意用户制造各种漏洞，因此不要在生产环境中这样做。

【讨论】：

【解决方案3】：

好的，所以submissions 不是输入元素，因此它没有value 方法。

不要使用submissions.value，而是使用submissions.innerHTML。

另外，重新排列最后几行以确保在输出所有数据之前更新点击计数器。

编辑：我没有意识到您的点击计数器最初是 let clicks = 1; 而不是 let clicks = 0;。仅当 clicks 最初设置为 0 时，以下 JS 中的重新排列才会起作用。

我通常建议使用let clicks = 0;，因为它对潜在的你自己和另一个阅读你的代码的人更有意义。如果您考虑一下 - 当您创建计数器 (clicks) 时，还没有任何点击，因此将其初始设置为 0 会更有意义。

let clicks = 0;

const writeFile = () => {
  const name = document.getElementById('txtName');
  const age = document.getElementById('txtAge');
  const email = document.getElementById('txtEmail');
  const country = document.getElementById('selCountry');
  const msg = document.getElementById('msg');
  const submissions = document.getElementById('clicks');

  // ++ is same thing as += 1
  clicks++;
  submissions.innerHTML = clicks;

  let data = [ 
    `<p>Name: ${name.value}</p>`, 
    `<p>Age: ${age.value}</p>`, 
    `<p>Email: ${email.value}</p>`,  
    `<p>Country: ${country.value}</p>`,  
    `<p>Message: ${msg.value}</p>`,  
    `<p>Submission No: ${submissions.innerHTML}</p>`
  ];
 
   
  $('#output').append("<br />" + "<br />");

  data.forEach(line => $('#output').append(line));
}

【讨论】：