单击时更改按钮值和颜色

Question

我正在接受 PHP laravel web 开发方面的培训

但是我在前端有两个小任务，我没有时间学习前端来完成它们，请帮助解决它们。

我有 4 个按钮和 1 个按钮：

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

                       <p> </p>   

我想要以下内容： 当用户按下其中一个按钮时：

   1- Change the button color.
   2- Putting the value of the button that was pressed in <p>.

• 例如有人点击按钮1： 按钮颜色将变为蓝色，p值为

  Students

Answer 1

遍历按钮节点列表，添加事件监听器。

设置一个函数来运行一个for循环来比较每个循环的索引。确保当前迭代类列表不是未定义的（如果未定义，则会抛出错误）。默认情况下，删除选择时的背景颜色，请检查索引是否匹配，如果要添加bg颜色，并将p标签设置为textcontent textcontent textcontent textcontent toxtcontent在当前按钮的文本续写中，使用具有背景色和颜色规则集的类。

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>

Answer 2

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>

---

这是一个旧答案，但回到它，我想展示一种方法，即使在重新加载页面后也能保持选择答案，只使用 JavaScript。解决方案在于使用localStorage。 （它在 Stack Snippets 中不起作用，因此请使用 this Jsitor link）

Answer 3

你可以用javascript做，这里是例子：

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

Answer 4

这是我的解决方案：

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>