Skip to content
Advertisement

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

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!

Advertisement

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>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement