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

Question

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

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

这是我的代码：

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 = 'Something';

然后您的 commandChange 函数将运行一次，而不是每个点击事件。您应该将函数放在点击事件中。

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>

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

Trying to update the innerText of an HTML element when a button is clicked in JavaScript

javascript

html

innertext