Question

我已经构建了一个基本脚本，可以在点击时添加1，在点击时减去1 问题是，每次单击按钮，您都可以看到文本框内容增加1或减少1，但在四分之一秒内，表单似乎重置并再次显示0的初始值

<html>
<head>
<script>
function inc()
{
document.content.quant.value++;
}

function dec()
{
document.content.quant.value--;
}
</script>
</head>

<body>
<form name="content">
<input type="text" id="quant" value="0">
<button onclick="inc()">increase</button>
<button onclick="dec()">decrease</button>
</form>
</body>
</html>

我确信我犯了一些愚蠢的错误 - 任何想法？

Answer 1

将type="button"添加到按钮

<button type="button" onclick="inc()">increase</button>

没有type属性的按钮的默认行为是提交它所属的表单。如果您将type更改为button，则无法执行任何操作：）

Answer 2

单击按钮时表单已提交。使用preventDefault来防止这种情况。

<html>
<head>
<script>
function inc()
{
document.content.quant.value++;
event.preventDefault();
}

function dec()
{
document.content.quant.value--;
event.preventDefault();
}
</script>
</head>

<body>
<form name="content">
<input type="text" id="quant" value="0">
<button onclick="inc()">increase</button>
<button onclick="dec()">decrease</button>
</form>
</body>
</html>

文本框内容在更改后立即重置

2 个答案: