Didn't Get the big word from 3 input using JavaScript-CodePudding

function forbig() {
  var word1 = document.getElementById("number1").value;
  var word2 = document.getElementById("number2").value;
  var word3 = document.getElementById("number3").value;
  var word4 = word1.length;
  var word5 = word2.length;
  var word6 = word3.length;

  if (word4 > word5 && word4 > word6) {
    document.getElementById("demo2").innerHTML = number1;
  } else if (word5 > word4 && word5 > word6) {
    document.getElementById("demo2").innerHTML = number2;
  } else if (word6 > word4 && word6 > word5) {
    document.getElementById("demo2").innerHTML = number3;
  } else {
    document.getElementById("demo2").innerHTML = "Wrong";
  }
}

<input placeholder="Input 1st Word" type="text" id="number1">

<input placeholder="Input 2nd Word:" type="text" id="number2">

<input placeholder="Input 3rd Word:" type="text" id="number3"><br><br>

<button type="submit" onclick="forbig()">tap to see the Big Word</button><br>
<!-- For result Showing -->
<span id="demo2"></span>

CodePudding user response：

The issue is that you are setting innerHTML to the input field, which is causing it to not output the word correctly.

To fix it, use the lines below.

if (word4 > word5 && word4 > word6) {
  document.getElementById("demo2").innerHTML = word1; // This line has been changed
} else if (word5 > word4 && word5 > word6) {
  document.getElementById("demo2").innerHTML = word2; // This line has been changed
} else if (word6 > word4 && word6 > word5) {
  document.getElementById("demo2").innerHTML = word3; // This line has been changed
} else {
  document.getElementById("demo2").innerHTML = "Wrong";
}

The HTML should now display the words correctly.

CodePudding user response：

function forbig() {
  var word1 = document.getElementById("number1").value;
  var word2 = document.getElementById("number2").value;
  var word3 = document.getElementById("number3").value;
  var word4 = word1.length;
  var word5 = word2.length;
  var word6 = word3.length;

  if (word4 > word5 && word4 > word6) {
    document.getElementById("demo2").innerHTML = word1; //Here we just need to assign the value of the input field which we are calling in the function Beginning, not the id of the input field.
  } else if (word5 > word4 && word5 > word6) {
    document.getElementById("demo2").innerHTML = word2; //Here we just need to assign the value of the input field which we are calling in the function Beginning, not the id of the input field.
  } else if (word6 > word4 && word6 > word5) {
    document.getElementById("demo2").innerHTML = word3; //Here we just need to assign the value of the input field which we are calling in the function Beginning, not the id of the input field.
  } else {
    document.getElementById("demo2").innerHTML = "Wrong";
  }
}

<input placeholder="Input 1st Word" type="text" id="number1">

<input placeholder="Input 2nd Word:" type="text" id="number2">

<input placeholder="Input 3rd Word:" type="text" id="number3"><br><br>

<button type="submit" onclick="forbig()">tap to see the Big Word</button><br>
<!-- For result Showing -->
<span id="demo2"></span>