如何使按钮在单击时增加和减少值？

我是编程新手。每次运行这段代码时，都没有任何反应。你能告诉我为什么这是吗？如何使按钮在单击时增加和减少值？

<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

如何使按钮在单击时增加和减少值？

回答

相关问题