Create multiplication table with minimum and maximum inputs-CodePudding

I have a program that creates a multiplication table using nested loops. The user input requires a number input larger than 2 and a multiplier less than 12. The following code already produces a part of the desired output except that the code does not follow the minimum and maximum input rule.

Is there a mistype in the code? Thanks.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      
      p{
        color: #27186b;
      }
    </style>
    <script>
      function addNumbers() {
    
    var multiplier;
        if (multiplier > 12)
        {
            alert("Multiplier above maximum of 12");
    }
    
    var number;
        if (number < 2)
        {
            alert("Number below minimum of 2");
    }
    
        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>

CodePudding user response：

just assign variable before condition.

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

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

CodePudding user response：

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:

If you are expecting numbers only, then your inputs need to be numbers only, use tag: type="number".
You don't have a closing tag for your result div '<div></div>'
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>