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

Questions

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

February 23, 2022

Hey guys. I’m creating an installation widget where the command to run changes depending on the buttons that are clicked (Build version and OS version)

I want the command text at the bottom to change when a user changes their build to Preview or LTS and so on. My logic is that it checks to see if the button has the "colorText" css style enabled, which will tell the program to change the innertext of the "Run this Command" part.

Heres my code:

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>

I havent worked with vanilla JavaScript in a long time so I’ve been trying to get familiar with it again. I would love some help on this issue! Thank you!

>Solution :

You used the operator

===

which will compare the values. To assign a value use

command.innerText = ‘Something’;

Then you commandChange function will run once instead of every click event.
You should put the function inside the click event.

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>