How do i have access inside div with specific id?

Question

0 i am trying to create simple Rock,paper, scissor game, but i have some case, i want to have access on div which id is firstplayer, also this div has increment function, which increases value by 1... if in form field i choose 12, an when i press "firstplayer" and it value will increase to 12, i want to console.log("you win"), i tried a lot, but it's not works, what can i do, to solve this problem? i don't want to increase firstplayer value by value which was chosen from form, i have increased number by one, but when firstpalyer number value reaches the mark that was marked in form, i want to conole log("you win"). for example i chose 7 in form field, and when firstplayer number value will reach to 7, i want to conole.log("you win")

 const firsPlayer = document.getElementById("firstplayer"); const Form = document.getElementById("submit"); form.addEventListener("input", function(event){ event.preventDefault(); if (event.target.value==="12"){ //////something } }) var x=0; function increment(){ return firsPlayer.innerHTML = ++x; } function playerwin(){ if(firsPlayer.childNodes[0].nodeValue == 12){ console.log("you win") } }

 <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>

Answer 1

It's unclear how what you are doing related to "rock, paper, scissors", but see the comments in the code below for answers.

 // Get references to the elements you'll work with const btn = document.getElementById("btn"); const sub = document.getElementById("submit"); const firsPlayer = document.getElementById("firstplayer"); const list = document.getElementById("list"); // Set up your event handlers in JavaScript, not HTML btn.addEventListener("click", increment); submit.addEventListener("click", function(event){ if (list.value==="12"){ //////something } }); var x=0; function increment(){ // DIV elements don't have a "value". They "have textContent". // Do you test to see if the player wins right here in the increment function if(++firsPlayer.textContent == list.value){ console.log("you win") } }

 #btn { font-weight:bold; cursor:pointer; margin:1em 0; }

 <,-- Since you aren't submitting data anywhere: you shouldn't use a FORM --> <label for="numbers">Game up to.</label> <select id="list" > <option value="7" >7</option> <option value="12">12</option> <option value="15">15</option> <option value="20">20</option> </select> <input type="button" id="submit" value="Submit"> <div> <.-- You can't have an H4 unless it comes after an H3. Don't use HTML elements because of the way the browser styles them, Use CSS for styling. Also. don't use inline HTML event attributes. Do your event binding in JavaScript. --> <div id="btn">Firstplayer</div> <div id="firstplayer"> </div> </div>