如何使按鈕在單擊時增加和減少值？

我是編程新手。每次運行這段代碼時，都沒有任何反應。你能告訴我爲什麼這是嗎？如何使按鈕在單擊時增加和減少值？

<body> 
    <input type=button value="increment" onclick="button1()" /> 
    <input type=button value="decrement" onclick="button2()" /> 
    <script type="text/javascript"> 
    var x = 0 
    document.write(x) 

    function button1() { 
     document.write(x++) 
    } 
    function button2(){ 
     document.write(x--) 
    } 
    </script> 
</body>

來源

2017-08-04 T. Ou

document.write是問題所在。它只在瀏覽器完成加載頁面之前運行。之後，document.write不起作用。它只是刪除所有現有的頁面內容。

您的第一個document.write在頁面完全加載之前執行。這就是爲什麼你應該看到兩個按鈕旁邊的0。

然而，頁面已加載。點擊一個按鈕會導致事件處理程序被執行，所以document.write將被調用，這在當時不起作用，因爲頁面已經完全加載。

document.write不應該再使用了。有許多更新DOM的現代方法。在這種情況下，它會創建一個<span>元素並使用textContent更新其內容。

此外，使用addEventListener而非內聯事件監聽器：

var x = 0; 
 
var span = document.querySelector('span'); // find the <span> element in the DOM 
 
var increment = document.getElementById('increment'); // find the element with the ID 'increment' 
 
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement' 
 

 
increment.addEventListener('click', function() { 
 
    // this function is executed whenever the user clicks the increment button 
 
    span.textContent = x++; 
 
}); 
 

 
decrement.addEventListener('click', function() { 
 
    // this function is executed whenever the user clicks the decrement button 
 
    span.textContent = x--; 
 
});

<button id="increment">increment</button> 
 
<button id="decrement">decrement</button> 
 
<span>0</span>

正如其他人所提到的，第一x++不會有明顯的影響，因爲x值加後更新了<span>的內容。但那不是你原來的問題。

來源

2017-08-04 08:14:37 PeterMader

的問題是，你把++和--後的變量，這意味着將遞增/打印後遞減變量。試試把之前的這個變量，如下所示。

另外，如上所述，您在document.write()中遇到了一些問題。考慮從W3Schools page下列文件：

的write()方法寫入HTML表達式或JavaScript代碼到文件。

write()方法主要用於測試。 如果在完整加載 HTML文檔後使用它，它將刪除所有現有的HTML。

因此，document.write()只要您點擊一個按鈕就會刪除您的所有現有內容。如果你想寫入文件，使用元素的.innerHTML這樣的：

var x = 0; 
 

 
document.getElementById('output-area').innerHTML = x; 
 

 
function button1() { 
 
    document.getElementById('output-area').innerHTML = ++x; 
 
} 
 

 
function button2() { 
 
    document.getElementById('output-area').innerHTML = --x; 
 
}

<input type=button value="increment" onclick="button1()" /> 
 
<input type=button value="decrement" onclick="button2()" /> 
 
<span id="output-area"></span>

來源

2017-08-04 07:59:16

不，問題不是後增量。這是'document.write'。你能否明確提到這一點？ – PeterMader

@PeterMader檢查更新的答案，然後！ –

爲什麼你不改變你的代碼位？代替document.write(x++)和document.write(x--)使用document.write(++x)和document.write(--x)。

來源

2017-08-04 08:00:23

但這不會使它工作。只是不要使用'document.write'。 – PeterMader

文檔寫入將刪除完整的html： write（）方法主要用於測試：如果在HTML文檔完全加載後使用它，它將刪除所有現有的HTML。 As in w3schools

試試這個，而不是

<body> 
<input type=button value="increment" onclick="button1()" /> 
<input type=button value="decrement" onclick="button2()" /> 
<div id="value"></div> 
<script type="text/javascript"> 
    var x=0 

    var element = document.getElementById("value"); 
    element.innerHTML = x; 

    function button1(){ 
     element.innerHTML = ++x; 
    } 
    function button2(){ 
     element.innerHTML = --x; 
    } 
</script>

我改變了x--和X ++來++ x和--x這樣的變化是立刻。有了這個改變，你的代碼也可以工作。顯示1或-1。

來源

2017-08-04 08:08:05

如何使按鈕在單擊時增加和減少值？

回答

相關問題