Estoy tratando de actualizar el número de participantes aumentándolo en uno cada vez que se hace clic en el botón Enviar y, al hacerlo, agregué un complemento () dentro de mi etiqueta de secuencia de comandos y aumenté el número de participantes cada vez que se hace clic en él. Pero el número de participantes no cambia por alguna razón.
Por cierto, soy nuevo en DOM y JS
let Agenda_style = document.querySelector('.agenda'); //to add style you must acess the class name/ID using querySelector Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda let NewElement = document.createElement("li "); //create new element of type <li> NewElement.innerText = "Here "; // add a text inside the <li> element Agenda_style.append(NewElement); // append a tet to the agendaa class let participant = 0; function add() { participant++; document.getElementById("submit").innerText = participant; }; <h5>Number of participant:<span id="submit">0</span></h5> <button type="button" onclick="add()">Submit</button> </div>Me falla, ya que ahora tengo el elemento .agenda ... ¿tienes eso en tu HTML?
Si pongo una marca nula alrededor de esa sección del guión, la pieza restante funciona.
<h5>Number of participants: <span id="submit">0</span></h5> <button type="button" onclick="add()">Submit</button> </div> <script> let Agenda_style = document.querySelector('.agenda'); // to add style you must access the class name/ID using querySelector if(Agenda_style != null) { // only proceed if Agenda_style exists Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda let NewElement = document.createElement("li "); // create new element of type <li> NewElement.innerText = "Here "; // add a text inside the <li> element Agenda_style.append(NewElement); // append a tet to the agendaa class } let participant = 0; function add() { participant++; document.getElementById("submit").innerText = participant; } </script>En estos días, tendemos a no usar JavaScript en línea, por lo que sería mejor tomar su botón con querySelector y luego usar addEventListener para llamar a su función cuando se hace clic en ella. De esta manera, hay una "separación de preocupaciones" entre su marcado, su CSS y su código.
const number = document.querySelector('#number'); const button = document.querySelector('button'); button.addEventListener('click', add, false); let participant = 0; function add() { number.textContent = ++participant; } <h5>Number of participant: <span id="number">0</span> </h5> <button type="button">Submit</button>Esto debería estar funcionando
function add() { let val = document.querySelector('#submit').innerText; val = parseInt(val)+1; }