Javascript onclick 选择随机 html 元素并为其设置样式答案

【问题标题】：Javascript onclick pick random html element and style itJavascript onclick 选择随机 html 元素并为其设置样式
【发布时间】：2017-06-17 22:48:17
【问题描述】：

您好，我需要一些关于 javascript 的帮助我是自学新手

我如何编码 - 我有一个表格和 2 个按钮，当我按下按钮时，我想选择随机表格数据（从 1 到 9）并更改它的背景颜色

当我按下第二个按钮时 - 按顺序将表格数据从 1 更改为 9。

// 我的 javascript 知识非常低，但我知道我需要为我的每个表数据提供 id，带有 onclick="random()" 的按钮，函数 random() - 但我不知道如何选择我为我的 td 提供的随机 ID

	<script type="text/javascript">

		//function random() {
		//	var myArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9");
		//	 var x = Math.floor((Math.random() * 9) + 1);}
	
		document.getElementById("random").onclick = function () {

			document.getElementById("1").style.backgroundColor = "red";

		}

	</script>

<!DOCTYPE html>
<html>
<head>
	<title>Javascript homework</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		
	table {

		border: 1px solid black;

	}

	th, td {

		height: 150px;
		width: 150px;
		text-align: center;
		color: black;
		background-color: white;
		font-size: 35px;
		border: 1px solid black;

	}
	</style>

</head>
<body>
	<div class="container">
		<div class="row">
				<div class="col-md-3"></div>
					<div class="col-md-6">	
						<table>
							<tr>
								<td id="1">1</td>
								<td id="2">2</td>
								<td id="3">3</td>
							</tr>
							<tr>
								<td id="4">4</td>
								<td id="5">5</td>
								<td id="6">6</td>
							</tr>
							<tr>
								<td id="7">7</td>
								<td id="8">8</td>
								<td id="9">9</td>
							</tr>
						</table>
						<button id="random" type="button" onclick="random()">Random</button>
						<button id="next" type="button" onclick="next()">Next</button>
					</div>
					<div class="col-md-3"></div>
		</div>
	</div>

</body>
</html>

【问题讨论】：

向我们展示您的代码以及您尝试过但不起作用的任何方法。
请务必create a Minimal, Complete, and Verifiable example
我知道的错误 javascript 代码，我知道如何在点击时更改元素，但不是评论中的随机元素，我正在尝试想出数组

标签： javascript html css button onclick

【解决方案1】：

已编辑：

见js里面的cmets：

function random(){
    //make a collection with all td elements
    var items = document.getElementsByTagName("td");

    for( i=0; i < items.length; i++ ){
        //that delete old backgroundColor style 
        items[i].style.backgroundColor = '';
    };
    //choose a random id between 1 and 9
    var random_id = Math.floor((Math.random()*9)+1);
    //aply the red style color to this random element
    document.getElementById(random_id).style.backgroundColor = "#ff0000";

};

<!DOCTYPE html>
<html>
<head>
	<title>Javascript homework</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		
	table {

		border: 1px solid black;

	}

	th, td {

		height: 50px;
		width: 50px;
		text-align: center;
		color: black;
		background-color: white;
		font-size: 15px;
		border: 1px solid black;

	}
	</style>

</head>
<body>
	<div class="container">
		<div class="row">
				<div class="col-md-3"></div>
					<div class="col-md-6">	
						<table>
							<tr>
								<td id="1">1</td>
								<td id="2">2</td>
								<td id="3">3</td>
							</tr>
							<tr>
								<td id="4">4</td>
								<td id="5">5</td>
								<td id="6">6</td>
							</tr>
							<tr>
								<td id="7">7</td>
								<td id="8">8</td>
								<td id="9">9</td>
							</tr>
						</table>
						<button id="random" type="button" onclick="random()">Random</button>
						<button id="next" type="button" onclick="next()">Next</button>
					</div>
					<div class="col-md-3"></div>
		</div>
	</div>

</body>
</html>

【讨论】：

你能解释一下你的答案吗？
感谢它的作品，但我怎么能在第二次点击后只有 1 个元素是红色的？
@kblok 我想你的意思是关于这个 Math.floor((Math.random()*(9-1))+1);。我依稀记得两个数字之间的随机函数。正确的是 Math.floor (Math.random () * (max-min + 1) + min); 但在 1-9 之间不需要 9-1+1。我现在已经用正确的随机数编辑了
@MTK 我正在浏览标记为“低质量帖子”的答案，社区不喜欢仅代码帖子或仅链接帖子。
@AlexJ。查看我编辑的答案，该答案也回应了您的第二个问题

【解决方案2】：

只返回一个介于 1 和 9 之间的随机数（参见 random 函数）。使用document.getElementById 选择该元素，并将其设置为红色。

见下文：

function random() {
    return Math.floor((Math.random() * 9) + 1);
}
	
document.getElementById("random").onclick = function () {
    document.getElementById(random()).style.backgroundColor = "red";
}

<!DOCTYPE html>
<html>
<head>
	<title>Javascript homework</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		
	table {

		border: 1px solid black;

	}

	th, td {

		height: 50px;
		width: 50px;
		text-align: center;
		color: black;
		background-color: white;
		font-size: 15px;
		border: 1px solid black;

	}
	</style>

</head>
<body>
	<div class="container">
		<div class="row">
				<div class="col-md-3"></div>
					<div class="col-md-6">	
						<table>
							<tr>
								<td id="1">1</td>
								<td id="2">2</td>
								<td id="3">3</td>
							</tr>
							<tr>
								<td id="4">4</td>
								<td id="5">5</td>
								<td id="6">6</td>
							</tr>
							<tr>
								<td id="7">7</td>
								<td id="8">8</td>
								<td id="9">9</td>
							</tr>
						</table>
						<button id="random" type="button" onclick="random()">Random</button>
						<button id="next" type="button" onclick="next()">Next</button>
					</div>
					<div class="col-md-3"></div>
		</div>
	</div>

</body>
</html>

【讨论】：

感谢它的作品，但我怎么能在第二次点击后只有 1 个元素是红色的？