无法使用javascript抓取和操纵HTML元素

时间:2018-07-22 04:35:05

标签: javascript html css

let button = document.getElementsByTagName('button');
button.value = 8;

//button.textCont = 'X'; --- DOESN'T WORK.
//button.innerHTML = 'X'; --- DOESN'T WORK.
body {
	background-color: coral;
}

h1 {
	font-family: 'monospace';
	text-align: center;
}

button {
	width: 100px;
	height: 100px;
	position: relative;
	left: 35px;
	top: 35px;
	background-color: coral;
	border: none;
	margin: 4px;
}


.game-box {
	background-color: black;
	width: 400px;
	height: 400px;
	border-radius: 10%;
	margin: auto;

}

.shave-left-top {
	border-top-left-radius: 10%;
}

.shave-right-top {
	border-top-right-radius: 10%;
}

.shave-left-bottom {
	border-bottom-left-radius: 10%;
}

.shave-right-bottom {
	border-bottom-right-radius: 10%;
}
<!DOCTYPE html>
<html>
<head>
	<title>javaScript Tic Tac Toe</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body class="wrapper">
	<h1>javascript Tic Tac Toe</h1>

	<div class="game-box">
		<div class="row-1">
			<button class="shave-left-top"></button> 
			<button ></button> 
			<button class="shave-right-top"></button> 
		</div>

		<div class="row-2">
			<button></button> 
			<button></button> 
			<button></button> 
		</div>

		<div class="row-3">
			<button class="shave-left-bottom"></button> 
			<button></button> 
			<button class="shave-right-bottom"></button> 
		</div>

	</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

嘿,伙计们,不知道发生了什么事。似乎无法使用JS抓取并更改按钮值,我的控制台中确实有一个错误:SCRIPT7002:XMLHttpRequest:网络错误0x80700013,http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json

我下载了此文件,但没有执行任何操作,随后错误再次出现。任何帮助吗?我在制作JS计算器时遇到了同样的问题。我什至张贴了它,但找不到答案。如果有帮助,我正在为浏览器使用Sublime 3和edge。谢谢。

1 个答案:

答案 0 :(得分:2)

let button = document.getElementsByTagName('button');

getElementsByTagName返回带有名称按钮的所有标签的数组。

要解决此问题,请在只有一个按钮的情况下更改数组第一个索引处的第一个元素

   button[0].value = 8;
   button[0].textCont = 'X';
   button[0].innerHTML = 'X';

或遍历数组并更改每个按钮的属性。

for(var i = 0; i < button.length; i++)
{
   button[i].value = 8;
   button[i].textCont = 'X';
   button[i].innerHTML = 'X';
}