How to use onClick in Javascript?

Asked

Viewed 468 times

0

Guys, I’m banging my head on something:

There is an HTML code, which makes a form. In this form there is an answer that I can choose from yes and nay. The answer below this, provides a field, IF you put yes in the above answer, as justification.

What I want to do: I want to create a function in the JS that when I select the yes this field appears, and in case I put nay he remains hidden.

My doubt: How do I use the JS? How do I use the onClick? I want to know which variables I place and how I can make this code, if I put the id of the yes and of nay, how I build?

I’m sorry for any doubts

I saw something like:

<script>
        const radio = document.querySelectorAll(".radioButton");
        const "element" = document.("");

        radio[0].addEventListener("click", function() {
            "".style.display = "block";
        });

        radio[1].addEventListener("click", function() {
            "".style.display = "none";
        });
 </script>

But I don’t know where I put each thing.. for example, what I want to hide, where I put in the code, id or name.. where I put each thing

javascript events onclick

  • If, any of the answers below solved your problem mark as accepted.

2 answers

1

Dude, you did almost everything just missing you create two option input elements and the text input element:

<label for="yes">Sim</label><input id="yes" name="radios" class="radioButton" type="radio">
<label for="no">Não</label><input id="no" name="radios" class="radioButton" type="radio">
<br>
<input id="textField" type="text" style="display: none;">

Then add a few things to your code:

<script>

    const radio = document.querySelectorAll(".radioButton");
    const text = document.querySelector("#textField");

    radio[0].addEventListener("click", function(){
        text.style.display = "block";
    });

    radio[1].addEventListener("click", function(){
        text.style.display = "none";
    })

Upshot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <label for="yes">Sim</label><input id="yes" name="radios" class="radioButton" type="radio">
    <label for="no">Não</label><input id="no" name="radios" class="radioButton" type="radio">
    <br>
    <input id="textField" type="text" style="display: none;">

    <script>

        const radio = document.querySelectorAll(".radioButton");
        const text = document.querySelector("#textField");

        radio[0].addEventListener("click", function(){
            text.style.display = "block";
        });

        radio[1].addEventListener("click", function(){
            text.style.display = "none";
        })

 </script>
 
</body>
</html>

-1

You use document.getElementById('id') inside the parentheses you paste the id you used you only use if it is id example <div id="nome"></div> inside the parentheses puts name because that’s what you used while the functions are used so you don’t have to use the same code several times so I’ll give you an example of a basic

function ola() {
 alert('Sei lá') }
dps tu pode chamar essa função no onclick de um botão 
Exemplo
<button type="button" onclick="ola()">Clique</button>

Browser other questions tagged javascript events onclick

You are not signed in. Login or sign up in order to post.