{button}.onclick 改变textContent

Question

我正在尝试制作简单的游戏“剪刀石头布”。此刻我陷入了改变全局变量的价值。情况：（例如）单击 => [摇滚]。我必须将其存储到全局变量的 ("playerMove").

const rock = document.createElement('button');
/*
*/
let playerMove;
playerMove = '';

我已经试过了

rock.onclick = function() {
   playerMove = 'Rock'; // Test in function..
}

但它只能在函数中工作（是的，我们都知道全局变量不能那样工作，所以......）。我可能很快就能解决这个问题，但此刻我想不出比这更好的了：|，我想帮助找到任何关于此的好资源，以（如何）通过单击按钮更改元素的文本内容/值.

抱歉我的英语不好..

Answer 1

你可以使用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>

Answer 2

要更新 playerMove 变量，您可以使用设置该值的函数。

document.createElement('button');
const rock = document.querySelector('button');

let playerMove = ''
const updateMove = (move) => {
  playerMove = move;
}

rock.onclick = () => {
  updateMove('Rock');
}

Answer 3

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>

强文本

此代码完美运行。它采用按钮包含的文本。我认为你的错误是你没有声明你创建一个js的按钮是一个child的body.

Answer 4

伙计们

好吧，我会详细解释一下 playerMove 在做什么..

playerText.textContent = playerMove;

所以我只是想改变 playerMove 但在我看到 AnanthDev 答案之后 >>

function playerMove(element, move) {
    element.addEventListener('click', () => {
        playerText.textContent = move;
    })
}

playerMove(rock, 'Rock');
playerMove(scissors, 'Scissors');
playerMove(paper, 'Paper');

{button}.onclick 改变textContent

{button}.onclick to change textContent

javascript

function

global-variables

onclick

onclicklistener