{button}.onclick to change textContent



我正在尝试制作简单的游戏">石纸剪刀">。此时此刻,我陷入了改变全局变量值的困境。情况:(例如)单击=>[摇滚]。我必须将其存储到全局变量(">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');

相关内容

  • 没有找到相关文章

最新更新