如何访问 div 元素内部？

Question

我正在尝试创建简单的石头剪刀布游戏， 但我有一些情况，我想访问 id 是 firstplayer 的 div，这个 div 也有增量功能，它增加 1 的值......如果在表单字段中我选择 12，当我按下“firstplayer”时它value 会增加到 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>