javascript - 这个脚本有什么问题,为什么我没有收到错误?

标签 javascript html css web

所以我对 JS 比较陌生,所以决定练习一下。我想做一个网页来选择你想买多少产品,有两个按钮加号和减号。该程序应该根据印象深刻的按钮将 1 添加到输入或取 1。 image of webpage

所以这工作正常,但后来我添加了一个 if 语句以确保用户没有输入超过 4 张票或低于 0 张票。这没有产生任何结果,在 chrome 上的开发人员工具中,它只是闪烁了一个错误,但并没有将其保留在那里。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
	<style>
	.myButton {
		background-color:#44c767;
		-moz-border-radius:28px;
		-webkit-border-radius:28px;
		border-radius:28px;
		border:1px solid #18ab29;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:17px;
		padding:16px 31px;
		text-decoration:none;
		text-shadow:0px 1px 0px #2f6627;
	}
	.myButton:hover {
		background-color:#5cbf2a;
	}
	.myButton:active {
		position:relative;
		top:1px;
	}

	</style>
	<script>

	function plus(){
	document.getElementById("htop").value=Number(document.getElementById("htop").value)+1;

	}
	function minus(){
	document.getElementById("htop").value=Number(document.getElementById("htop").value)-1;

	}
	function validate(){
		if(Number(document.getElementById("htop").value)<=0){
			alert("You can not submit less than NULL tickets");
			return false;
		}
		else if(Number(document.getElementById("htop").value)>4){
		alert("you can not buy more than 4 tickets at once");
		return false;
		}
		else{
			alert("you may proceed");
			return true;
		}
	}

	</script>
</head>
<body >
	<form>
	<button id="plus" class="myButton" onclick="plus()">+</button>
	<button id="minus" class="myButton" onclick="minus()">-</button>
	<input type="text" id="htop" value="0" />
	<br>
	<input type="submit" value="Submit" onclick="validate()">
</form>

</body>
</html>

最佳答案

我相信对于您正在尝试做的事情,您不应该使用表单标签。尝试删除它们。

<body >
    <button id="plus" class="myButton" onclick="plus()">+</button>
    <button id="minus" class="myButton" onclick="minus()">-</button>
    <input type="text" id="htop" value="0" />
    <br>
    <input type="submit" value="Submit" onclick="validate()">


</body>

关于javascript - 这个脚本有什么问题,为什么我没有收到错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35900561/

相关文章:

javascript - JS/CSS/XHTML : Don't copy specific text during copy events

javascript - 防止 touchmove 事件与 jquery UI 对话框的滚动冲突

javascript - 在同一个 CSS 水平菜单中组合复选框和按钮

javascript - 滚动背景动画

.net - 是否有用于组织/按字母顺序排列 CSS、JSON 对象等的工具或库?

html - 我将如何在 bootstrap 4 中添加范围 slider 模型?

javascript - 有什么方法可以在 Google 表单上设置默认选择吗?

Javascript/Python 字符 ASCII 检查

jquery - 页面滚动时以不同的速度滚动元素

html - 在 IE 中调整流体宽度部分的大小