change the button value and color on click

I am training in PHP laravel web development

But I have two small tasks in the Frontend, and I don't have the time to learn the Frontend to get them done, please help with solving them.

I have 4 button and 1 p:

       <button> trans('navbar.Students')</buttom>
       <button> trans('navbar.Schools')</buttom>
       <button> trans('navbar.teachers')</buttom>
       <button> trans('navbar.teachers')</buttom>

                       <p> </p>   

I want the following: When the user presses one of the buttons:

   1- Change the button color.
   2- Putting the value of the button that was pressed in <p>.
  • example someone clicks button1: The button color will change to blue, and the p value will be

    Students

4 answers

  • answered 2021-04-08 03:31 Dicki Andrea

    You can do with javascript, here is the example :

    document.querySelectorAll('button').forEach(function(item){
       item.addEventListener('click', function(e){
          e.target.style.background = 'red';
          e.target.setAttribute('value', 'yourValue');
       });
    });
    

  • answered 2021-04-08 03:46 The KNVB

    This is my solution:

    function go(theButton){
        theButton.style.background = 'blue';
      theButton.style.color = 'white';
        document.getElementById("gg").textContent=theButton.textContent;
    }
    <button onclick="go(this)"> Students</button>
    <button onclick="go(this)"> Schools</button>
    <button onclick="go(this)"> teachers</button>
    <button onclick="go(this)"> teachers</button>
    
    <p id="gg"> </p>

  • answered 2021-04-08 04:05 Jacob Lockwood

    var buttons = document.querySelectorAll(".my-button");
    var para = document.querySelector("#my-para");
    
    buttons.forEach((button, i) => {
      button.addEventListener("click", () => {
        select(i);
        para.innerHTML = button.innerHTML;
      });
    });
    
    function select(num) {
      buttons.forEach((button, i) => {
        if (i === num) return button.classList.add("active");
        button.classList.remove("active");
      });
    }
    .active {
      background: blue;
    }
    <button class="my-button">AAA</button>
    <button class="my-button">BBB</button>
    <button class="my-button">CCC</button>
    <button class="my-button">DDD</button>
    <p id="my-para"></p>

  • answered 2021-04-08 05:24 dale landry

    Iterate over the button nodeList, add an event listener.

    Set up a function to run a for loop to compare the index of each loop. Make sure the current iterations classlist is not undefined (if it is undefined, it will throw an error). By default remove the background color for when selections change, check to see if the indexes match, if so add BG color and set p tags textContent to the textContent of the current button using a class that has the background-color and color rule set.

    const button = document.querySelectorAll('.btn')
    const display = document.querySelector('#display')
    
    const setSelection = (btnEl, index, parEl) => {
      for (let key in btnEl) {
        if (btnEl[key].classList !== undefined) {
          btnEl[key].classList.remove('blue')
          if (index == key) {
            btnEl[key].classList.add('blue')
            parEl.textContent = btnEl[key].textContent
          }
        }
      }
    }
    
    button.forEach((btn, i) => {
      btn.addEventListener('click', (e) => {
         setSelection(button,i,display)
      })
    })
    .blue {
      background-color: blue;
      color: white;
    }
    <button class="btn">Value 1</button>
    <button class="btn">Value 2</button>
    <button class="btn">Value 3</button>
    <button class="btn">Value 4</button>
    
    <p id="display"></p>