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!
Advertisement
Answer
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>