如何访问 div 元素内部？

Question

我正在尝试创建简单的摇滚，纸，剪刀游戏，但我有一些情况，我想访问 id 是 firstplayer 的 div，这个 div 也有增量 function，它增加了 1 的值......如果在表单字段中我选择 12，当我按下“firstplayer”时，它的值会增加到 12，我想 console.log(“you win”)，我尝试了很多，但它不起作用，我该怎么办，来解决这个问题问题？

<!-----my html---->
<form action="#">
        <label for="numbers">Game up to:</label>
        <select id="form" >
          <option value="7" >7</option>
          <option value="12">12</option>
          <option value="15">15</option>
          <option value="20">20</option>
        </select>
        <input type="submit" id="submit">
      </form>
<div>
              <h4 onclick="increment()">Firstplayer</h4>
            <div id="firstplayer">

            </div>
          </div>

///my js
const firsPlayer = document.getElementById("firstplayer");
const Form = document.getElementById("submit");

form.addEventListener("input", function(event){
  event.preventDefault();
  if (event.target.value==="12"){ 
   return playerwin()
  }
})

var x=0;
function increment(){
   return firsPlayer.innerHTML = ++x;
}

// i tried this but it's not working
function playerwin(){   
         if(firsPlayer.childNodes[0].nodeValue == 12){
            console.log("you win")
         }
}

我的代码在这里https://codepen.io/kafka2001/pen/LYpmexe

Answer 1

不完全确定最终结果应该是什么，但请检查下面的代码，该代码说明了它基本上是如何工作的。 只需根据您的需要进行调整即可获得所需的结果。

 const firsPlayer = document.getElementById("firstplayer"); const select = document.getElementById("select"); var x = 0; function increment() { firsPlayer.innerHTML = Number(firsPlayer.innerHTML) + 1; } function addSelected() { firsPlayer.innerHTML = Number(firsPlayer.innerHTML) + Number(select.value); } function playerwin() { if (firsPlayer.childNodes[0].nodeValue == 12) { console.log("you win") } }

 <select id="select"> <option value="7">7</option> <option value="12">12</option> <option value="15">15</option> <option value="20">20</option> </select> <input type="button" onClick="increment();" value="Increment"> <div> <h4 onclick="addSelected()">Firstplayer</h4> <div id="firstplayer"></div> </div>