{button}.onclick 更改 textContent
[英]{button}.onclick to change textContent
问题描述
I'm trying make simple game " Rock Paper Scissors" .
我正在尝试制作简单的游戏“石头剪刀布” 。 At this moment I got stuck in changing value of Global Variable.此时我陷入了改变全局变量值的问题。 Situation: (for ex.) Click => [Rock].情况：（例如）单击=> [Rock]。 I have to store this into Global Variable's (" playerMove ").我必须将其存储到全局变量（“ playerMove ”）中。
const rock = document.createElement('button');
/*
*/
let playerMove;
playerMove = '';
I arleady try我已经尝试
rock.onclick = function() {
playerMove = 'Rock'; // Test in function..
}
but Its only work in function (Yea, we all know global variable doesn't work that way so..).但它只在函数中起作用（是的，我们都知道全局变量不能那样工作......）。 I may be able to fix that problem soon but at this moment my mind can't think any better than this :|, I want help to find any good resource about this to (how) change textContent / Value of element by clicking on button.我可能很快就能解决这个问题，但此时此刻我想不出比这更好的了 :|，我需要帮助找到任何关于此的好的资源来（如何）通过单击按钮来更改元素的文本内容/值.
Sorry for my bad English..对不起，我的英语不好..
4 个解决方案
解决方案1
0 已采纳 2021-10-29 19:15:09
You can use HTMLButtonElement.addEventListener() to listen for "click" events, and then do whatever you want to, a simple demo可以使用HTMLButtonElement.addEventListener()监听“点击”事件，然后为所欲为，一个简单的demo
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>
解决方案2
0 2021-10-29 19:21:58
To update the playerMove variable you could use a function that set that value.要更新 playerMove 变量，您可以使用设置该值的函数。
document.createElement('button');
const rock = document.querySelector('button');
let playerMove = ''
const updateMove = (move) => {
playerMove = move;
}
rock.onclick = () => {
updateMove('Rock');
}
解决方案3
0 2021-10-29 20:19:30
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>
强文本
This code works perfectly.这段代码完美运行。 it takes the text that the button contains.它需要按钮包含的文本。 I think your mistake is that you didn't declare that the button you created a js is a child of body.我认为您的错误是您没有声明您创建的 js 按钮是 body 的子项。
解决方案4
0 2021-10-29 20:33:58
Ty guys泰哥们
Well, I will explain lil more about what playerMove was doing..好吧，我将详细解释一下 playerMove 在做什么。
playerText.textContent = playerMove;
so I simple was trying to change playerMove but after I see AnanthDev answer >>所以我只是想改变 playerMove 但在我看到AnanthDev回答之后 >>
function playerMove(element, move) {
element.addEventListener('click', () => {
playerText.textContent = move;
})
}
playerMove(rock, 'Rock');
playerMove(scissors, 'Scissors');
playerMove(paper, 'Paper');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.