JavaScript >> Javascript チュートリアル >  >> Tags >> Date

JavaScriptでボタンがクリックされたときにHTML要素のinnerTextを更新しようとしています

やあみんな。クリックしたボタン (ビルドのバージョンと OS のバージョン) に応じて実行するコマンドが変わるインストール ウィジェットを作成しています

ユーザーがビルドをプレビューや 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>

私は長い間バニラの JavaScript を使っていなかったので、再びそれに慣れようとしています。この問題について何か助けていただければ幸いです。ありがとうございます!

答え

演算子を使用しました

===

値を比較します。値を割り当てるには

command.innerText =「何か」;

次に、commandChange 関数は、すべてのクリック イベントではなく 1 回実行されます。この関数はクリック イベント内に配置する必要があります。

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>

  1. フィリピンのスタイル付きマップでラベルを非表示にするにはどうすればよいですか?

  2. prompt() Internet Explorer 8 で

  3. これらのツールは、きれいなコードを書くのに役立ちます