Help with HTML/Javascript

Asked

Viewed 135 times

1

I need to create a page that has two questions with two answers (radio) of YES or NO, and, at the bottom, a send button. I need the questions and answers, when answered and the user clicks the send button, to appear in a TEXTAREA just below for the user to copy and paste into a notepad for example.

Follow the code already created in HTML with the structure:

<html>
<head></head>
<body>

    <p>Pergunta1? 

        <input type="radio"name="escolhaL"value="sim"/>SIM 
        <input type="radio"name="escolhaL"value="não"/>N&Atilde;O
    </p>

    <p>Pergunta2?
        <input type="radio"name="escolhaR"value="sim"/>SIM 
        <input type="radio"name="escolhaR"value="não"/>N&Atilde;O
    </p>

<br>    

        <p> 
            <input type="submit"value="Enviar"/> 
        </p> 

<br>

        <p> 
            <textarea name"mensagem" rows="10" cols="27"></textarea> 
        </p>

</body>
</html>

What I don’t know how to do is when I click the button to play the selected questions and answers inside the TEXTAREA. Could someone help me?

javascript html html5 xhtml

  • knows how to use Jquery?

  • I don’t know man. I started developing for web a little while ago.

  • It would help?

  • Dude, it’s super simple stuff, but it requires medium knowledge, if you don’t put all the code here and it still won’t work, take a look at this: http://api.jquery.com/

  • Could you tell me which of these tags I use to do what I need? Knowing which tag is the right one I turn to see how it is implemented in the code.

  • Our Renan and Randrade, helped a lot, the two worked and ran perfectly, and gave to understand cool step by step how it works with your explanation, helped a lot, thank you very much!

  • I believe that this question is not appropriate to the proposal of the website because it does not present a technical doubt, but asks for a complete solution to a problem to be provided. Please note the rules for posting questions in the website’s Help Center.

Show 2 more comments

2 answers

2

There are a few ways to do this. As you are a beginner, I will put the most "simple" (I found) way to do this, but not the best.

First, let’s look at a functional example:

<script>
function PreencherCampo(){
    var pergunta1 =  document.getElementById("pergunta1").innerHTML;
    var pergunta2 =  document.getElementById("pergunta2").innerHTML;
    
    var elementos1 = document.getElementsByName('pergunta1'); 
    var resposta1 = '';
    	for (i = 0; i < elementos1.length; i++) {
      	if (elementos1[i].checked) {
        resposta1 = elementos1[i].value;
    	}
    }
    
    var elementos2 = document.getElementsByName('pergunta2'); 
    var resposta2 = '';
    	for (i = 0; i < elementos2.length; i++) {
      	if (elementos2[i].checked) {
        resposta2 = elementos2[i].value;
    	}
    }
    
		document.getElementById("resposta").innerHTML = pergunta1 + ': ' + resposta1 + '\n'+ 
						pergunta2 + ': ' + resposta2;
}
</script>  
  
  
  <p id="pergunta1">Pergunta1?</p>
        <input type="radio"name="pergunta1"value="Sim" checked/>SIM 
        <input type="radio"name="pergunta1"value="Não"/>Não
    <p id="pergunta2">Pergunta2?</p>
        <input type="radio"name="pergunta2"value="Sim" checked/>SIM 
        <input type="radio"name="pergunta2"value="Não"/>Não
<br>    

        <p> 
            <input type="submit"value="Enviar"  onclick="PreencherCampo()"/> 
        </p> 

<br>

        <p> 
            <textarea name"mensagem" rows="10" cols="27" id="resposta"></textarea> 
        </p>

In this example, first we take the value of each question by id of the elements, thus:

var pergunta1 =  document.getElementById("pergunta1").innerHTML;
var pergunta2 =  document.getElementById("pergunta2").innerHTML;

After that, we’ll get all the radios for name, and after that check which one is with the attribute checked (indicating which is marked or not marked).

var elementos1 = document.getElementsByName('pergunta1'); 
    var resposta1 = '';
        for (i = 0; i < elementos1.length; i++) {
        if (elementos1[i].checked) {
        resposta1 = elementos1[i].value;
        }
    }

And we do the same thing with the second group, as the example code shows. If we had more, we would create the third and so on.

After that, we need to put the value on textarea, and for that just get the element (textarea) by id and set the innerHTML as the value we want, so:

document.getElementById("resposta").innerHTML = pergunta1 + ': ' + resposta1 + '\n'+ 
                        pergunta2 + ': ' + resposta2;

Finally, we call our function by clicking the button send, by the event .onclick() on our button, in this way:

<input type="submit"value="Enviar"  onclick="PreencherCampo()"/>

With all this, we have the expected result, using only .

1

I would start by changing HTML, use <div> and classes to group elements.

The way you are doing, you will have a huge job only to get the question title (which is a paragraph full of other elements inside). Use a tag to keep the title isolated from the rest of the element, as you will need this textual content later.

There are several ways to improve this, a priori would leave so:

<div class='pergunta'>
   <p>Você vem sempre aqui?</p>
   <input type='radio' name='pergunta1' value='Não'>Não <br>
   <input type='radio' name='pergunta1' value='Sim'>Sim
</div>

This will make it easy for you to get all the elements that have class .pergunta using document.querySelectorAll, if you need to include/remove questions in the future, the way to get them will continue the same.

(function() {

  document.querySelector('button').addEventListener('click', copiarPerguntas);


  function copiarPerguntas() {
    
    var $perguntas = document.querySelectorAll('.pergunta'),
        $textarea  = document.querySelector('textarea'),
        length     = $perguntas.length;

    $textarea.innerHTML = '';
    for (var i = 0; i < length; i++){      
      var pergunta = $perguntas[i];
      var titulo   = pergunta.querySelector('p').innerHTML;
      var resposta = pergunta.querySelector('input[type="radio"]:checked').value;
      
      $textarea.innerHTML += titulo + '\n' + resposta + '\n';
    }
  }
})();
textarea { width: 400px; height: 100px }
<div class='pergunta'>
  <p>Você vem sempre aqui?</p>
  <input type='radio' name='pergunta1' value='Não'>Não <br>
  <input type='radio' name='pergunta1' value='Sim'>Sim
</div>

<div class='pergunta'>
  <p>Essa cantada está "manjada"?</p>
  <input type='radio' name='pergunta2' value='Não'>Não <br>
  <input type='radio' name='pergunta2' value='Sim'>Sim
</div>

<button type='submit'>Enviar</button>

<br>
<textarea></textarea>

Browser other questions tagged javascript html html5 xhtml

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