How to call a function multiple times in JavaScript?-CodePudding

I created functions to get the value from HTML input fields and put it as text inside an HTML element. I need the function to put the value of the input inside HTML elements multiple times, however the function takes the value and only puts it in the first one.

How can I make the function put the value of the input in every div with the same id (multiple times in one text).

function getUserInput1() {
var Question1 = document.getElementById("Question1").value;
document.getElementById("Answer1").innerHTML = Question1   " " ;
}

function getUserInput2() {
var Question2 = document.getElementById("Question2").value;
document.getElementById("Answer2").innerHTML = Question2   " ";
}

function getUserInput3() {
var Question3 = document.getElementById("Question3").value;
document.getElementById("Answer3").innerHTML = Question3   " ";
}

.input-box {
  width: 50%;
  padding: 7px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
}

.createbutton {
  background-color: #4b83fc;
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor : pointer;
}

.Questionstyle {
    font-size: 15px;
    line-height: 5px;
}

.Resultstyle {
    font-size: 20px;
    line-height: 30px;
}

<p >This is Question #1</p>
<input type="text" id="Question1"  name="fname"><br>

<p >This is Question #2</p>
<input type="text" id="Question2"  name="fname"><br>

<p >This is Question #3</p>
<input type="text" id="Question3"  name="fname"><br>

<button  
    onclick="getUserInput1(); getUserInput2(); getUserInput3(); getUserInput4()">Create</button>

<br>
<br>
<div id="Result" >
    <p>This is answer of question #1 : 
        <span id="Answer1" style="color: blue;"></span>
        And then we have answer of question #2 : 
        <span id="Answer2" style="color: blue;"></span>
        Then answer of question #3 : 
        <span id="Answer3" style="color: blue;"></span>
        And here we have answer of question #1 again : 
        <span id="Answer1" style="color: blue;"></span> 
        and also answer of question #2 again : 
        <span id="Answer2" style="color: blue;"></span> 
        Then answer of question #3 again : 
        <span id="Answer3" style="color: blue;"></span>.
    </p>
</div>

CodePudding user response：

Create a generic function and use a loop.

for (let i = 1; i <= QUESTION_COUNT; i  ) {
    fillAnswerElements(questionNumber);
}

function fillAnswerElements(questionNumber) {
    let question = document.getElementById("Question"   questionNumber).value;
    let answerElements = document.getElementsByClassName("Answer"   questionNumber);
    for (let answerElement = 0; answerElement < answerElements.length; answerElement  ) {
        answerElement.innerHTML = question;
    }
}

NB: you can't use multiple identical IDs on a same page. Use class instead.

CodePudding user response：

IDs in HTML are meant to be unique. You may not have elements with the same ID.

You can use a class instead:

<div id="Result" >
    <p>This is answer of question #1 : 
        <span  style="color: blue;"></span>
        And then we have answer of question #2 : 
        <span  style="color: blue;"></span>
        Then answer of question #3 : 
        <span  style="color: blue;"></span>
        And here we have answer of question #1 again : 
        <span  style="color: blue;"></span> 
        and also answer of question #2 again : 
        <span  style="color: blue;"></span> 
        Then answer of question #3 again : 
        <span  style="color: blue;"></span>.
    </p>
</div>

Then, in JS, you'll have to get the elements by class, and loop through them:

function getUserInput1() {
    var Question1 = document.getElementById("Question1").value;

    for(const elem of document.querySelector(".Answer1")){
        elem.innerHTML = Question1   " " ;
    }
}
function getUserInput2() {
    var Question2 = document.getElementById("Question2").value;

    for(const elem of document.querySelector(".Answer2")){
        elem.innerHTML = Question2   " " ;
    }
}
function getUserInput3() {
    var Question3 = document.getElementById("Question3").value;

    for(const elem of document.querySelector(".Answer3")){
        elem.innerHTML = Question3   " " ;
    }
}

And, instead of having seperate functions for each question, you can have one that works for either:

function getUserInput(n) {
    var Question = document.getElementById("Question"   n).value;

    for(const elem of document.querySelectorAll(".Answer"   n)){
        elem.innerHTML = Question   " " ;
    }
}

...and call it like:

function getAllUserInputs(){
  for(let i = 0; i < 3; i  )
    getUserInput(i);
}

Finally, you could completely generalize this by using a common.Question class for all questions and a common .Answer class with a data-question attribute set to the question's number:

function getAllUserInputs(){
    const questions = document.querySelectorAll(".Question");
    const answers = document.querySelectorAll('.Answer');

    for(let i = 0; i < answers.length; i  ){
        const question =  answers[i].dataset.question;
        answers[i].innerText = questions[question-1].value;
    }
}

document.querySelector("#createbutton").addEventListener('click', getAllUserInputs);

.input-box {
  width: 50%;
  padding: 7px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
}

.createbutton {
  background-color: #4b83fc;
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor : pointer;
}

.Questionstyle {
    font-size: 15px;
    line-height: 5px;
}

.Resultstyle {
    font-size: 20px;
    line-height: 30px;
}

<p >This is Question #1</p>
<input type="text"  name="fname"><br>

<p >This is Question #2</p>
<input type="text"  name="fname"><br>
<p >This is Question #3</p>
<input type="text"  name="fname"><br>

<button id="createbutton"  >Create</button>

<br>
<br>
<div id="Result" >
    <p>This is answer of question #1 : 
        <span  data-question="1" style="color: blue;"></span>
        And then we have answer of question #2 : 
        <span  data-question="2" style="color: blue;"></span>
        Then answer of question #3 : 
        <span  data-question="3" style="color: blue;"></span>
        And here we have answer of question #1 again : 
        <span  data-question="1" style="color: blue;"></span>
        and also answer of question #2 again : 
        <span  data-question="2" style="color: blue;"></span>
        Then answer of question #3 again : 
        <span  data-question="3" style="color: blue;"></span>
    </p>
</div>

CodePudding user response：

You can use variables in text very easily by using `` for example:

document.getElementById("Answer1").innerHTML =

`this is a test text for ${question1} and also ${question2}`;

it can make your code lean and clean❤️