I have 2 sample buttons, and what I need is when a user clicks on the second button, the first button will change its text.

Please see sample below:

$(document).ready(function() {
  $('#anchor-sample-btn').on('click', function() {
    var text = $('#anchor-sample-btn').text();
    if (text === "On") {
      $(this).html('Off');
    } else {
      $(this).text('On');
    }
  });
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button class="outline">When I'm clicked, toggle the first btn on/off</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Also, how do I disable the first button when it's clicked for 5 seconds to prevent double click?

EDIT:

When the first btn is clicked, it should still change text and be disabled for 5 seconds.

The second button is just an alternative to perform the same function of the first btn, so it should toggle the first on/off.

Thanks a lot in advance!

CodePudding user response：

You can do it in many ways, this is one way (not using jQuery).

const $btnOne = document.querySelector('#button-one');
const $btnTwo = document.querySelector('#button-two');

let buttonOneIsOn = true;

$btnTwo.addEventListener('click', () => {
  buttonOneIsOn = !buttonOneIsOn;
  $btnOne.innerText = buttonOneIsOn ? 'On' : 'Off';
});

$btnOne.addEventListener('click', () => {
  buttonOneIsOn = !buttonOneIsOn;
  $btnOne.innerText = buttonOneIsOn ? 'On' : 'Off';
  
  $btnOne.disabled = true;
  setTimeout(() => {
    $btnOne.disabled = false;
  }, 5000);
});

<button id="button-one">On</button>

<p>When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button id="button-two">When I'm clicked, toggle the first btn on/off</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

One approach is to just trigger the click on the first when the second is clicked

$(document).ready(function() {
  // nothing changed here
  $('#anchor-sample-btn').on('click', function() {
    var text = $('#anchor-sample-btn').text();
    if (text === "On") {
      $(this).html('Off');
    } else {
      $(this).text('On');
    }
  });
  
  // listener on second button that triggers first
  $('#button-2').click(function(){
     $('#anchor-sample-btn').click()
  })
  
  
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button class="outline" id="button-2">When I'm clicked, toggle the first btn on/off</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To avoid repetition, you could add them to the buttons with that have the same classes.

const btns = document.querySelectorAll('.outline');
const anchorBtn = document.querySelector('#anchor-sample-btn');
let btnOn = true;

btns.forEach(btn => {
  btn.addEventListener('click', (e)=> {
    let target = e.target;
    anchorBtn.textContent = btnOn ? 'Off' : 'On';
    btnOn = !btnOn;
    if(target.id === 'anchor-sample-btn'){
      target.disabled = true;
      setTimeout(()=>{
        target.disabled = false;
      },5000);
    }
  });
});

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button class="outline">When I'm clicked, toggle the first btn on/off</button>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Check out which button should have onclick event and how you handle it.

$(document).ready(function() {
  $('#clickme').on('click', function() {
    var target = $('#anchor-sample-btn');
    var text = target.text();
    if (text === "On") {
      target.text('Off');
    } else {
      target.text('On');
    }
  });
});

<script src="https://bbirdtools.netlify.app/_global-externals/scripts/3.4.1.jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p> When the second btn is clicked, the first btn should change to <b>On</b> if it's <b>Off</b>, and vice versa</p>

<button id="clickme" class="outline" href="#anchor-sample-btn">When I'm clicked, toggle the first btn on/off</button>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Hi this way with JQuery . I only gave id's 'second-button' to the second button.