17 replies

Trying to add several functionalities with a single button using javascript

Hello guys, sorry to disturb you all; I'm trying to experiment with event bubbling but first I wanted to make a button that when I first click on it, some contents are added to my preformatted paragraph with id="output". Then when I clicked on it once more, the button content should change from "Click me ! " to "Reset" and it reset our preformatted paragraph content to an empty string. If I click on the "Reset" button now, I should have the "Click me!" button which display content of our preformatted paragraph as we were doing initially. I tried to do it inside the function handleClick itself, like I added the lines:

if (button.textContent ==='Click me!'){
  button.textContent = 'Reset';
  output.textContent = '';
}

else {
  button.textContent = 'Click me!';
}

if (button.textContent ==='Click me!'){
  button.textContent = 'Reset';
  output.textContent = '';
}

else {
  button.textContent = 'Click me!';
}

The problem is the browser is too fast, I can't see any change like we have the illusion that both events are happening "at the same time" . Can someone explain how I should tackle this problem please.

<body>
    <div class="wrapper">
      <button class="__btn">Click me !</button>
      <pre id="output"></pre>
    </div>
  </body>

<body>
    <div class="wrapper">
      <button class="__btn">Click me !</button>
      <pre id="output"></pre>
    </div>
  </body>

const output = document.querySelector('#output');

function handleClick(event) {
    
    output.textContent += `\nYou clicked on a ${event.currentTarget.tagName} element \n`;
}

const button = document.querySelector('.__btn');
const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click',handleClick);
button.addEventListener('click', handleClick);

const output = document.querySelector('#output');

function handleClick(event) {
    
    output.textContent += `\nYou clicked on a ${event.currentTarget.tagName} element \n`;
}

const button = document.querySelector('.__btn');
const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click',handleClick);
button.addEventListener('click', handleClick);

Trying to add several functionalities with a single button using javascript

if (button.textContent ==='Click me!'){
  button.textContent = 'Reset';
  output.textContent = '';
}

else {
  button.textContent = 'Click me!';
}

if (button.textContent ==='Click me!'){
  button.textContent = 'Reset';
  output.textContent = '';
}

else {
  button.textContent = 'Click me!';
}

<body>
    <div class="wrapper">
      <button class="__btn">Click me !</button>
      <pre id="output"></pre>
    </div>
  </body>

<body>
    <div class="wrapper">
      <button class="__btn">Click me !</button>
      <pre id="output"></pre>
    </div>
  </body>

const output = document.querySelector('#output');

function handleClick(event) {
    
    output.textContent += `\nYou clicked on a ${event.currentTarget.tagName} element \n`;
}

const button = document.querySelector('.__btn');
const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click',handleClick);
button.addEventListener('click', handleClick);

const output = document.querySelector('#output');

function handleClick(event) {
    
    output.textContent += `\nYou clicked on a ${event.currentTarget.tagName} element \n`;
}

const button = document.querySelector('.__btn');
const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click',handleClick);
button.addEventListener('click', handleClick);

Trying to add several functionalities with a single button using javascript

Similar Threads

Trying to add several functionalities with a single button using javascript

Similar Threads

Similar Threads

Similar Threads