CODEWITHSUNDEEP
javascripthtmlcss
Jad es
Jad es

Reputation: 89

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>.

Upvotes: 0

Views: 1710

Answers (4)

user14550434
user14550434

Reputation: 

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>

This is an old answer but coming back to it, I wanted to show a way to keep the answer selected even after reloading the page, using just JavaScript. The solution lies in using localStorage. (it doesn't work in Stack Snippets, so use this Jsitor link)

Upvotes: 1

dale landry
dale landry

Reputation: 8600

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>

Upvotes: 1

The KNVB
The KNVB

Reputation: 3844

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>

Upvotes: -1

Dicki Andrea
Dicki Andrea

Reputation: 1

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');
   });
});

Upvotes: 0

Related Questions