-1

I have a program that creates a multiplication table using loops. The code has 2 input part: number(multiplicand) & multiplier. The user input requires 2 numbers to define the parameter but each input must be between 2 - 10, otherwise an alert box appears saying that the inputs are larger than 2 - 10. However, there are still no outputs.

Is there a mistype in the code? Thanks.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
     
    </style>
    <script>
      function addNumbers() {
    
    var multiplier;
        if (multiplier > 10 && multiplier < 2)
        {
            alert("Multiplier above maximum of 10");
            return;
    }
    
    var number;
        if (number < 2 && multiplier < 2)
        {
            alert("Number below minimum of 2");
            return;
    }
    
        var result = "";

    number = Number(document.getElementById("number").value);
    multiplier = Number(document.getElementById("multiplier").value);        
        
        
        for(var i = number; i <= multiplier; i++){
          result = result + "<p>"+ number + "*" + i + "=" + number * i+"</p>";
        }

        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
    </br>
    Enter the number : <input id="number" />
    Enter the multiplier : <input id="multiplier" />
    <br>    
    </br>
    <button onclick="addNumbers()">Print Multiplication table</button> 
    <div id="result">

  </body>
</html>
beginner
  • 63
  • 6

2 Answers2

1

First: there is not nested loops in your JS code, there is only one loop. Nested loop is formed by two or more loops one inside of other, with two 'for' loops for example, you have an outer loop and an inner loop, forming a nested loop.

Second: you have some logic issues, lets clarify:

  1. If you are expecting numbers only, then your inputs need to be numbers only, use tag: type="number".
  2. You don't have a closing tag for your result div '<div></div>'
  3. For <br>, you don't need to close this tag, this tag is a void element, you can just '<br>' or for best practice '<br/>', but is a line break that only in certain cases need a closing tag (working with XHTML). see this

Third: per your request, you can add a logic in your inputs that manage min and max values (min="1" max="5"), but in your function, you will need to validate that these values met your rules.

if (number < multiplier) doStuff; else alert('error message');


function addNumbers() {
  var multiplier;
  var number;
  number = Number(document.getElementById("number").value);
  multiplier = Number(document.getElementById("multiplier").value);
  if (multiplier > 12) {
    alert("Multiplier above maximum of 12");
    return;
  }
  if (number < 2) {
    alert("Number below minimum of 2");
    return;
  }
  var result = "";
  for (var i = number; i <= multiplier; i++) {
    result = result + "<p>" + number + "*" + i + "=" + number * i + "</p>";
  }
  document.getElementById("result").innerHTML = result;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         p{
         color: #27186b;
         }
      </style>
   </head>
   <body>
      <br>
      Enter the number : <input id="number" type="number" min="2" max="12" />
      Enter the multiplier : <input id="multiplier" type="number" min="2" max="12" />
      <br>    
      <button onclick="addNumbers()">Print Multiplication table</button> 
      <div id="result"></div>
   </body>
</html>
Elvis Pimentel
  • 360
  • 1
  • 11
0

just assign variable before condition.

var number = Number(document.getElementById("number").value);

var multiplier = Number(document.getElementById("multiplier").value);

Mihir
  • 64
  • 4