Javascript附加代碼未定義-有解無憂

我有這個代碼，我從表單中獲取提交并將其附加到 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. 任何幫助將非常感激。

uj5u.com熱心網友回復：

您的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 中是非常不安全的。它為惡意用戶創造了各種漏洞，所以不要在生產中這樣做。

uj5u.com熱心網友回復：

<a>標簽沒有value屬性。您必須使用textContent或innerText來獲得計數。

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

<a id="clicks">2</a>

uj5u.com熱心網友回復：

好的，所以submissions不是輸入元素，所以它沒有value方法。

而不是使用submissions.valueuse submissions.innerHTML。

此外，重新排列最后幾行以確保在輸出所有資料之前更新點擊計數器。

編輯：我不知道您的點擊計數器最初let clicks = 1;并沒有let clicks = 0;。以下 JS 中的重新排列僅在clicks初始設定為0.

我通常會建議使用，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));
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/385756.html

標籤：javascript 查询

上一篇：自動交換和直接將代碼推送到生產有什么區別？

下一篇：查找特定類的下一個實體的ID