How to make elements change when a radio button is clicked?

Question

I am working on some code and am trying to get the text inside an h1 tag to be changed when a radio button is selected using javascript but am having trouble with it. Could someone show me an example of "some text" being changed to "new text" when a radio button is selected?

Answer 1

Hey Aaron I attempted to apply what you showed me along with reading up on event listeners and am not getting it. I was able to get some of the code i am working on so you can see it and hopefully let me know where I am going wrong. I only copied my html and javascript and it is not made to work on phone or sololearn at the moment but will hopefully give you the idea of what i am trying to do. Upon someone clicking input discount i want the text to change from what is the cost to what is the parts list price

https://code.sololearn.com/W0pCaQ1zg08g/?ref=app

Answer 2

Can you open this one?
https://code.sololearn.com/WrU6BSGYT3BN/?ref=app

Answer 3

Cool. Youve taught me quite a few new things. Im going to try to apply what you showed me to my code. Thank you

Answer 4

Wow it was that bad huh? Ill try to write cleaner in the future I am still pretty new to coding. Your advice has been been great and i appreciate it very much! I applied what you just showed me to my code and have the text switching as it should. Now i can work on the rest. Thank you very much!

Answer 5

Unfortunately it is on my work computer. I do have the radio button set up as an input. I figured it would be an onClick event but that didnt seem to work. I understand how to swap out text for example

<h1 id="text">some text</h1>

document.getElementById("text").innerHTML = "new text";

I just dont understand how to apply that to take place when the button is selected. Ill see if i can get the code to share here.

Answer 6

Yes i can. I dont understand the javascript i am looking at though. Ive read about event listeners but I dont know what querySelector is.

Answer 7

querySelector is just like getElementById or getElementsByClassName. The only difference is that you select elements like in CSS. E.g. querySelector("#test") is the same as getElementById("test")

Answer 8

Ok that makes sense. So you added an event listener for the input and it looks like you are using an onLoad event. What are the () for that you use in both the event and listener for?

Answer 9

() => {
is short for
function() {

The onload event fires when an element is fully loaded. In this case it waits until everything (the whole window element) is loaded so we can be sure that all html elements exist when the script starts. If we don't didn't do this the script might want to access elements that not loaded yet, which would cause errors.

Answer 10

Dude, that thing took me like an hour to fix xD
First you need to fix the getElementByClass in your JavaScript. This command is actually used as document.getElementsByClassName().
The plural "elements" means that the command returns an array of html nodes so you'd have to use
document.getElementsByClassName("className")[0].addEventListener(...
Alternatively document.querySelector will do the job, too.

The JavaScript didn't work even when I fixed it because the HTML was messed up a bit. Here's my advice for further coding:
- Write clean code! Use syntactically correct code to avoid syntax errors. For example <spanid= "id"> might be misinterpreted, write <span id="id"> instead.
- Use indentation! It makes code MUCH clearer to read. There a lot of tools (code formatters) that will do this automatically for you.
- Don't use class names and IDs unnecessarily. Just use them if you actually use them in JavaScript or CSS
- Avoid unnecessary HTML tags. Too many tags make HTML hard to read.

Answer 11

I might have changed a few html tags. Also I have copied the JavaScript into the JS tab. The main problem was the JavaScript as explained above. The other thing was that the class option2 was not accessible for the JavaScript because the HTML was misinterpreted because of the issues I explained above. Generally inputs and forms are very special html tags that might work unexpectedly. You should check in the dev tools of your browser if everthing loads correctly and all HTML nodes are in place before focusing on debugging the JavaScript.
https://code.sololearn.com/WR5iJn9MbRFK/?ref=app

Answer 12

Can share your code? :)
Btw. you might want to use the "input" event on the radio button and change the innerText property of the heading.