我正在尝试制作简单的游戏">石纸剪刀">。此时此刻,我陷入了改变全局变量值的困境。情况:(例如)单击=>[摇滚]。我必须将其存储到全局变量(">playerMove")中。
const rock = document.createElement('button');
/*
*/
let playerMove;
playerMove = '';
我已经试过了
rock.onclick = function() {
playerMove = 'Rock'; // Test in function..
}
但它只在函数中起作用(是的,我们都知道全局变量不是这样起作用的,所以…)。我可能很快就能解决这个问题,但此刻我的脑海里想不出比这更好的了:|,我想帮助找到任何关于这方面的好资源,通过点击按钮来(如何)更改元素的textContent/Value。
对不起我英语不好
您可以使用HTMLButtonElement.addEventListener()
来监听"点击";事件,然后做任何你想做的事,一个简单的演示
const btn = document.getElementById('test');
const container = document.getElementById('val');
btn.addEventListener('click', () => {
container.textContent = 'works'
})
<div id="val">test</div>
<button id="test">click me</button>
要更新playerMove变量,可以使用设置该值的函数。
document.createElement('button');
const rock = document.querySelector('button');
let playerMove = ''
const updateMove = (move) => {
playerMove = move;
}
rock.onclick = () => {
updateMove('Rock');
}
const rock = document.getElementById('button');
console.log(rock)
let playerMove;
playerMove = '';
rock.addEventListener('click',(e)=>{
playerMove =e.target.innerHTML;
console.log(playerMove);
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Aide</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<button id="button">Rock</button>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
strong文本
此代码运行良好。它接受按钮包含的文本。我认为你的错误在于你没有声明你创建的js按钮是body的子项
Ty guys
好吧,我会详细解释playerMove在做什么。。
playerText.textContent = playerMove;
所以我只是想换个playerMove,但在我看到AnanthDev的回答之后>gt;
function playerMove(element, move) {
element.addEventListener('click', () => {
playerText.textContent = move;
})
}
playerMove(rock, 'Rock');
playerMove(scissors, 'Scissors');
playerMove(paper, 'Paper');