Intro

Hello! I’m still very new to coding in general and using platforms like Stackoverflow, GitHub, etc so I apologize in advance if I have done something incorrectly within this post as well.

It is also my first post so please let me know of any corrections to make so I know how to make a more coherent posts in the future.

Problem

I have followed a HTML, CSS, & JS calculator tutorial online and have done the same exact step, however, when I ran the code my buttons have came out in different sizes as shown in the image below: image of the buttons in different sizes

This is a screenshot of the video’s code: Calculator tutorial code

I’m unsure of how to pinpoint my errors.

This is the code that I have up till the point where I encountered this error:

function insert(num) {
  document.form.textview.value = document.form.textview.value + num
}

* {
  margin: 0;
  padding: 0;
}

.button {
  width: 50;
  height: 50;
  font-size: 25;
  margin: 2;
  cursor: pointer;
}

.textview {
  width: 217;
  margin: 5;
  font-size: 25;
  padding: 5;
}

<html>

<head>
</head>

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview">
      <table>
        <tr>
          <td><input type="button" value="C"></td>
          <td><input type="button" value="<"></td>
          <td><input type="button" value="/"></td>
          <td><input type="button" value="x"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="7"></td>
          <td><input class="button" type="button" value="8"></td>
          <td><input class="button" type="button" value="9"></td>
          <td><input class="button" type="button" value="-"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="4"></td>
          <td><input type="button" value="5"></td>
          <td><input type="button" value="6"></td>
          <td><input type="button" value="+"></td>
        </tr>
        <tr>
          <td><input type="button" value="1" onclick="insert(1)"></td>
          <td><input type="button" value="2"></td>
          <td><input type="button" value="3"></td>
          <td><input type="button" value="+"></td>
        </tr>
      </table>
    </form>
  </div>
</body>

</html>

Is the issue possibly within the style element?

Thank you!

Answer

I found typo error in you input tag, just you have to write “class” where you have written “type”, see below for better understanding.

<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>

Change to :

<td><input class="button" value="5"></td>
<td><input class="button" value="6"></td>
<td><input class="button" value="+"></td>

The buttons for my HTML, CSS, JS calculator is coming out in various sizes

Intro

Problem

Advertisement

Answer