FizzBuzz test

HTML

</head>

<body>
  <br/>
  <style>
    #calc {
      width: 600px;
      height: 500px;
    }
    
    #btn {
      width: 100%;
      height: 40px;
      font-size: 40px;
    }

  </style>
  <form Name="calc">
    <table id="calc" border=2>
      <tr>
        <td colspan=5>
          <input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text">
        </td>
        <td style="display:none">
          <input name="M" type="number">
        </td>
      </tr>
      <tr>
        <td>
          <input id="btn" type=button value="0" OnClick="calc.display.value+='0'">
        </td>
        <td>
          <input id="btn" type=button value="1" OnClick="calc.display.value+='1'">
        </td>
        <td>
          <input id="btn" type=button value="2" OnClick="calc.display.value+='2'">
        </td>
        <td>
          <input id="btn" type=button value="+" OnClick="calc.display.value+='+'">
        </td>
      </tr>
      <tr>
        <td>
          <input id="btn" type=button value="3" OnClick="calc.display.value+='3'">
        </td>
        <td>
          <input id="btn" type=button value="4" OnClick="calc.display.value+='4'">
        </td>
        <td>
          <input id="btn" type=button value="5" OnClick="calc.display.value+='5'">
        </td>
        <td>
          <input id="btn" type=button value="-" OnClick="calc.display.value+='-'">
        </td>
      </tr>
      <tr>
        <td>
          <input id="btn" type=button value="6" OnClick="calc.display.value+='6'">
        </td>
        <td>
          <input id="btn" type=button value="7" OnClick="calc.display.value+='7'">
        </td>
        <td>
          <input id="btn" type=button value="8" OnClick="calc.display.value+='8'">
        </td>
        <td>
          <input id="btn" type=button value="x" OnClick="calc.display.value+='*'">
        </td>
      </tr>
      <tr>
        <td>
          <input id="btn" type=button value="9"...

CSS

* {
  font-family: sans;
}

h1 {
  font-weight: bold;
  margin: 6px;
  border-bottom: 1px solid #ccc;
}

p {
  margin: 12px 6px;
}

<div style="color:blue; border: 1px dashed currentColor;">
  The color of this text is blue.
  <div style="background:currentColor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

JavaScript

var resultEl = document.getElementById('result');
//resultEl.innerHTML = 'No results';

// answer
for (var i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    if (i % 5 === 0) {
      resultEl.innerHTML += i + ' fizzbuzz <br>';
    } else {
      resultEl.innerHTML += i + ' fizz <br>';
    }
  } else if (i % 5 === 0) {
    resultEl.innerHTML += i + ' buzz <br>';
  } else {
    resultEl.innerHTML += i + '<br>';
  }
}

for (var i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    if (i % 5 === 0) {
      console.log('FizzBuzz');
    } else if (i % 3 === 0) {
      console.log('Fizz');
    } else if (i % 5 === 0) {
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }