我是 JavaScript 新手，在 document.writeln 函式中遇到問題當我單擊提交按鈕時，它不會列印用戶在瀏覽器中輸入的值，而是使用 console.log 在控制臺上列印（ )
我應該犯什么錯誤？
如果我在某個地方錯了，請糾正我...
這是我的 HTML 檔案的代碼，js 包含在腳本標記中
function getval() {
var submittedvalue = document.getElementById('number');
document.writeln(submittedvalue.value);
}<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>uj5u.com熱心網友回復：
您可以使用 innerHTML 來撰寫結果。
function getval() {
var submittedvalue = document.getElementById('number');
document.getElementById('value').innerHTML = submittedvalue.value;
}<p id="value"></p>
<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>uj5u.com熱心網友回復：
不要在頁面加載后使用document.writelnand document.write（或者，在大多數情況下，根本不使用）。如果您在頁面加載后使用它們，它們會隱式地再次打開頁面 - 清除其所有內容并用您提供的新內容替換它們。
要添加到 DOM，請使用DOM 方法：
- 呼叫
insertAdjacentHTML或insertAdjacentText在一個元素上（如document.body） - 創建元素 (
createElement) 并appendChild在元素上使用 - 使用較新
append的元素 - 等等（DOM有很多）......
另外，要獲取 an 的值input，您可以使用它的.value屬性。
這是您使用的示例insertAdjacentText：
function getval() {
const submittedValue = document.getElementById('number').value;
document.body.insertAdjacentText("beforeend", submittedValue);
}<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>或者更有可能，您想添加一個p或類似的東西來包裝它：
或者創建一個元素并附加它，這樣當您多次使用按鈕時，所有數字都不會連接起來：
function getval() {
const submittedValue = document.getElementById('number').value;
const p = document.createElement("p");
p.textContent = submittedValue;
document.body.appendChild(p);
}<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>最后，我強烈建議不要使用onxyz-attribute 樣式的事件處理程式。相反，使用addEventListener：
document.getElementById("the-button").addEventListener("click", () => {
const submittedValue = document.getElementById('number').value;
const p = document.createElement("p");
p.textContent = submittedValue;
document.body.appendChild(p);
});<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button id="the-button">Submit the number</button>uj5u.com熱心網友回復：
不要在您的代碼中使用 document.writeln 或 document.write，因為首先它會覆寫您的檔案，然后將它用于在網頁示例中注入腳本：
document.write('用一些 js 代碼放置一個腳本標簽')
而是使用 dom 方法作為 innerHTML（如果是 html 內容）或 innerText（如果它只是純文本）或 console.log() 或警報
<p id="value"></p>
<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="document.getElementById('value').innerHTML = document.getElementById('number').value">
innerhtml</button>
<button onclick="console.log(document.getElementById('number').value)"> console</button>
<button onclick="alert(document.getElementById('number').value)">alert</button>
使用 f12 查看控制臺
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/427027.html
標籤：javascript dom 输入
上一篇：如何更改附加字串的顏色？