在 JavaScript 中单击按钮时尝试更新 HTML 元素的 innerText

Question

大家好。 我正在创建一个安装小部件，其中运行的命令会根据单击的按钮（构建版本和操作系统版本）发生变化

当用户将构建更改为预览或 LTS 等时，我希望底部的命令文本发生变化。 我的逻辑是，它会检查按钮是否启用了“colorText”css 样式，这将告诉程序更改“运行此命令”部分的内部文本。

这是我的代码：

 const btns = document.querySelectorAll('.links'); const osBtns = document.querySelectorAll('.OSVersion') const command = document.querySelector('.Command') btns.forEach(btn => { btn.addEventListener('click', e => { // remove any existing active links btns.forEach(b => b.classList.remove('colorText')); // activate the clicked link e.target.classList.add('colorText'); }) }); function commandChange() { if (btns[1].classList.contains('colorText')) { command.innerText === "# MacOS Binaries dont support CUDA, install from source if CUDA is needed conda install pytorch torchvision torchaudio -c pytorch" } else { command.innerText === "conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch" } } commandChange();

 <section class="PyTorch"> <div class="listWrapper"> <ul class="listContents"> <li> <p>PyTorch Build</p> </li> <li> <p><a href="#" class="links">Stable (1.10.2)</a></p> </li> <li> <p><a href="#" class="links">Preview (Nightly)</a></p> </li> <li> <p><a href="#" class="links">LTS (1.8.2)</a></p> </li> </ul> <ul class="listContents"> <li> <p>Your OS</p> </li> <li> <p><a href="#" class="OSVersion">Linux</a></p> </li> <li> <p><a href="#" class="OSVersion">Mac</a></p> </li> <li> <p><a href="#" class="OSVersion">Windows</a></p> </li> </ul> <ul class="listContents"> <li> <p>Run this Command</p> </li> <li> <p class="Command">conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch</p> </li> </ul> </div> </section>

我已经很长时间没有使用 vanilla JavaScript 了，所以我一直在尝试再次熟悉它。 我希望在这个问题上得到一些帮助！ 谢谢！

Answer 1

您使用了运营商

===

这将比较值。 赋值使用

command.innerText = '某物';

然后你 commandChange function 将运行一次而不是每次点击事件。 您应该将 function 放在点击事件中。

 const btns = document.querySelectorAll('.links'); const osBtns = document.querySelectorAll('.OSVersion') const command = document.querySelector('.Command') btns.forEach(btn => { btn.addEventListener('click', e => { // remove any existing active links btns.forEach(b => b.classList.remove('colorText')); // activate the clicked link e.target.classList.add('colorText'); commandChange(); }) }); function commandChange() { if (btns[1].classList.contains('colorText')) { command.innerText = "# MacOS Binaries dont support CUDA, install from source if CUDA is needed conda install pytorch torchvision torchaudio -c pytorch" } else { command.innerText = "conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch" } }

 <section class="PyTorch"> <div class="listWrapper"> <ul class="listContents"> <li> <p>PyTorch Build</p> </li> <li> <p><a href="#" class="links">Stable (1.10.2)</a></p> </li> <li> <p><a href="#" class="links">Preview (Nightly)</a></p> </li> <li> <p><a href="#" class="links">LTS (1.8.2)</a></p> </li> </ul> <ul class="listContents"> <li> <p>Your OS</p> </li> <li> <p><a href="#" class="OSVersion">Linux</a></p> </li> <li> <p><a href="#" class="OSVersion">Mac</a></p> </li> <li> <p><a href="#" class="OSVersion">Windows</a></p> </li> </ul> <ul class="listContents"> <li> <p>Run this Command</p> </li> <li> <p class="Command">conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch</p> </li> </ul> </div> </section>