Help with HTML / JavaScript

Question

Help with HTML / JavaScript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I need to create a page that has two questions with two answers (radio) of YES or NO, and, below, a send button. I need the questions and answers, when answered and the user clicks the submit button, 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 do not know how to do is when you click the play button the selected questions and answers within TEXTAREA. Could someone help me?

javascript html html5 xhtml

asked by anonymous 06.04.2016 / 22:46

2 answers

Problems setting the layout in Xcode How to make NPM always update the last comite in the master?

score 2 · Answer 1

There are a few ways to do this. As a beginner, I'll put the "simplest" (I found) way to do this, but not the best.

First, let's look at a working 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, we first get the value of each question by id of elements, like this:

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

After this, we will get all radios by name , and after that check what is with the checked attribute (which indicates which is checked or not).

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 this, we need to put the value in textarea , and for this we just get the element (textarea) by id and set innerHTML to the value we want, like this:

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

Finally, we'll call our function by clicking the submit button, by event .onclick () on our button, like this:

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

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

score 1 · Answer 2

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

When should I use the class attribute in HTML elements?

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

There are several ways to improve this, a priori would look like this:

<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 easier for you to get all elements that have class .pergunta using document.querySelectorAll , if you need to include / remove questions in the future, how to get them will remain 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>