-2

I'm trying to update the number of participants by increasing it by one every time the submit button gets clicked, and by doing so I added an add() inside my script tag and increased the participant number every time it gets clicked. But the number of participants doesn't get changed for some reason.

Btw I'm new to DOM and 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>
connexo
  • 53,704
  • 14
  • 91
  • 128
DarkBot
  • 43
  • 7
  • 2
    Inline event handlers like `onclick` are [bad practice](https://stackoverflow.com/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](https://stackoverflow.com/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these) instead. [What Do You Mean “It Doesn’t Work”?](https://meta.stackexchange.com/q/147616/289905) Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. – Sebastian Simon Mar 09 '22 at 12:13
  • Your HTML has a closing `` which was never opened. – connexo Mar 09 '22 at 12:32

3 Answers3

1

It fails for me, as I have now .agenda element.. do you have that in your HTML?

If I put a null check around that section of the script, the remaining piece works.

<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>
Mike Irving
  • 1,480
  • 1
  • 12
  • 20
  • that's right it worked for me too. But why does the commented code prevent the function add from working? and how can I make them all works at the same time – DarkBot Mar 09 '22 at 12:25
  • If you look in your console you'll see this `Uncaught TypeError: Cannot read properties of null (reading 'style')` .. `Agenda_Style` is `null / undefined`. I will amend my answer code above to put a null check around that code, rather than comment it out.. then once it does exist in the DOM it will work – Mike Irving Mar 09 '22 at 12:53
0

These days we tend to not use inline JavaScript, so it would be best to grab your button with querySelector, and then use addEventListener to call your function when it's clicked. This way there's a "separation of concerns" between your mark-up, your CSS, and your code.

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>
Andy
  • 61,948
  • 13
  • 68
  • 95
-1

This should be working

function add() {
  let val = document.querySelector('#submit').innerText;
  val = parseInt(val)+1;
}
Joy Dey
  • 563
  • 1
  • 5
  • 17