我嘗試運行它第一次作業的代碼，但在第二次它不會作業我不知道為什么？我想以一種我可以一遍又一遍地發送多條訊息的方式做到這一點

var message = document.querySelector('.container');
var btn     = document.getElementById('btn');
var inpt    = document.getElementById('txt');

function AddMessage() {
  if (String(inpt.value) != '' && isNaN(inpt.value) == true) {
    message.innerHTML  = `<p>${inpt.value} </p>`;
    inpt.value = '';
  }
}

input {
  outline: none;
}

<div class="container">
  <input type="text" value="" id="txt">
  <button id="btn" onclick="AddMessage()">send</button>
  <p>whats your name ?</p>
</div>

uj5u.com熱心網友回復：

您只能更新內部 html 以獲取答案，而不是帶有輸入的完整塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        input{
            outline: none;
        }
    </style>
    <div class="container">
        <input type="text" value="" id="txt">
        <button id="btn" onclick="AddMessage()">send</button>
        <p>whats your name ?</p>
        <p id="answer"></p>
    </div>
    <script>
var message = document.querySelector('.container');
var btn = document.getElementById('btn');
var inpt = document.getElementById('txt');
var answer = document.getElementById('answer');


function AddMessage(){
    if( String(inpt.value) != '' && isNaN(inpt.value) == true  )
    {
        answer.innerHTML = `<p>${inpt.value} </p>`;
        inpt.value = '';
    }
}
    </script>
</body>
</html>

uj5u.com熱心網友回復：

由于您的輸出元素是所有其他元素的包裝器，因此當您這樣做時，您將覆寫所有這些元素：

message.innerHTML  = `<p>${inpt.value} </p>`;

在視覺上（甚至可能直觀地）這沒有明顯的效果。但它所做的是創建全新的元素，這些元素不再對應于您的btn和inpt變數。這使您與不代表螢屏上任何內容的陳舊物件進行互動。

可能最簡單的方法是創建一個更具體的輸出元素。例如，<div>在您的容器中添加另一個并輸出到該容器：

var message = document.getElementById('message'); // reference new element
var btn     = document.getElementById('btn');
var inpt    = document.getElementById('txt');

function AddMessage() {
  if (String(inpt.value) != '' && isNaN(inpt.value) == true) {
    message.innerHTML  = `<p>${inpt.value} </p>`;
    inpt.value = '';
  }
}

input {
  outline: none;
}

<div class="container">
  <input type="text" value="" id="txt">
  <button id="btn" onclick="AddMessage()">send</button>
  <p>whats your name ?</p>
  <div id="message"></div> <!-- new element -->
</div>

uj5u.com熱心網友回復：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        input{
            outline: none;
        }
    </style>
    <div class="container">
        <input type="text" value="" id="txt" name="txt">
        <button id="btn" onclick="AddMessage()">send</button>
        <p>whats your name ?</p>
        <ul id="list">
        
        </ul>
    </div>
    <script>
        var message = document.querySelector('.container');
var btn = document.getElementById('btn');
var inpt = document.getElementById('txt');
var list = document.getElementById('list');
let myList = "";

function AddMessage(){
    
    if( String(inpt.value) !== '' && isNaN(inpt.value) == true  )
    {
       myList  =`<li>${inpt.value}</li>`;
       list.innerHTML = myList;
    }
}
    </script>
</body>
</html>

uj5u.com熱心網友回復：

這條線message.innerHTML = ...

等于message.innerHTML = message.innerHTML ...，它為 message.innerHTML 分配了一些新的東西，換句話說，它重寫了內容，因此btn and inpt不再參考原始 dom。

var message = document.querySelector('.container');
var btn = document.getElementById('btn');
var inpt = document.getElementById('txt');
var output = document.getElementById('output');
function AddMessage() {
console.log('addMessage')
  if (String(inpt.value) != '' && isNaN(inpt.value) == true) {
    output.innerText=inpt.value;
  }
}

input {
  outline: none;
}

<div class="container">
  <input type="text" value="" id="txt">
  <button id="btn" onclick="AddMessage()">send</button>
  <p>whats your name ?</p>
  <p id="output"></p>
</div>

uj5u.com熱心網友回復：

問題`.innerHTML`

您分配給.innerHTML. 這會導致重新創建元素的后代（請參閱innerHTML“設定...”）：

const oldReference = document.getElementById("element");
document.body.innerHTML  = ""; // Assigning to innerHTML
const newReference = document.getElementById("element");

const isSameElement = oldReference === newReference;
console.log({ isSameElement });

<div id="element">

如您所見，舊的參考btn并inpt不會是當前 DOM 中的元素。

旁注：決議.innerHTML可能非常耗時，并且它與用戶輸入一起使用是一個安全問題。

安全注意事項

特別是對于用戶輸入，您不應該使用.innerHTML，因為這是將腳本插入網頁的一種簡單方法：

顯示代碼片段

document.body.addEventListener("click", evt => {
  if (!evt.target.closest("button")) return;
  
  const input = document.querySelector("input");
  document.body.innerHTML  = input.value;
});

pre{padding:2px 4px;border:1px solid;width:min-content}

<input><button>Insert</button>

<p>Try to input this:</p>
<pre><code>&lt;img src=""
  one rror="console.log('any script here!')"></code></pre>

<p>Then look into your browser console.

替代品`.innerHTML`

如果要添加元素，可以使用document.createElement()、Element.append()和Node.textContent：

顯示代碼片段

const input = document.querySelector("input");

document.querySelector("button").addEventListener("click", evt => {
  const p = document.createElement("p");
  p.textContent = input.value;
  document.body.append(p);
  
  input.value = "";
  
  const currentInput = document.querySelector("input");
  console.log("Is same input?", input === currentInput);
});

<input><button>Insert</button>

<p>Also try adding some HTML, for example: <code>&lt;span>Test&lt;/span>

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

標籤：javascript

上一篇：在JavaScript中獲取具有相同名稱的多個選中復選框的值

下一篇：如何不讓我的bootstrap4下拉排序代碼成為ifhell

為什么輸入值不會更新？當我點擊發送按鈕時？

問題.innerHTML

安全注意事項

替代品.innerHTML

問題`.innerHTML`

替代品`.innerHTML`