按钮值未显示 -javascript

Question

我有一个 html 文档，我正在尝试构建简单的计算器

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.buttons {
  width: 50px;
  height: 50px;
  background-color: #F0F0F0;
  moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border: 2px solid #ba1a1a;
  text-align:center;
  padding: 5px;
  font-size: large;
}
.cbuttons {
  width: 100px;
  height: 50px;
  background-color: #ba1a1a;
  moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border: 2px solid #F0F0F0;
  padding: 5px;
  font-weight: bolder;
  font-size: large;
}
td{
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
   <div style="padding-top: 300px;padding-left: 300px;">
   <table>
   <tr>
      <td colspan="2">
         <input type="button" class="cbuttons" value="CE">
      </td>
   </tr>
   <tr>
      <td>
         <input type="button" class="buttons" value="7">
      </td>
      <td>
         <input type="button" class="buttons" value="8">
      </td>
      <td>
         <input type="button" class="buttons" value="9">
      </td>
   </tr>
   <tr>
      <td>
         <input type="button" class="buttons" value="4">
      </td>
      <td>
         <input type="button" class="buttons" value="5">
      </td>
      <td>
         <input type="button" class="buttons" value="6">
      </td>
   </tr>
   <tr>
      <td>
         <input type="button" class="buttons" value="1">
      </td>
      <td>
         <input type="button" class="buttons" value="2">
      </td>
      <td>
         <input type="button" class="buttons" value="3">
      </td>
   </tr>
  </table>
  </div>
</body>
<script src="jsfile.js" type="text/javascript"></script>
</html>

这是我的 jsfile.js 文件

window.onload = function() {
        var elements = document.getElementsByClassName("buttons")
        for(var i = 0; i < elements.length; i++) {
            var element = elements[i];
            element.onclick = function() {
                alert(element.value);
            }
        }
    }

我正在尝试获取按钮的值，我在 alert(element.value);[=28= 中得到 3 ] 我想要什么： 当按下 3 时必须提醒我 3 如果我的代码有误，请纠正我。

谢谢

Answer 1

你快到了。使用 this.value.

而不是 element.value

window.onload = function() {

        var elements = document.getElementsByClassName("buttons")
        
        for(var i = 0; i < elements.length; i++) {
            var element = elements[i];
          
            element.onclick = function() {
                alert(this.value);
            }
        }
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.buttons {
  width: 50px;
  height: 50px;
  background-color: #F0F0F0;
  moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border: 2px solid #ba1a1a;
  text-align:center;
  padding: 5px;
  font-size: large;
}
.cbuttons {
  width: 100px;
  height: 50px;
  background-color: #ba1a1a;
  moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border: 2px solid #F0F0F0;
  padding: 5px;
  font-weight: bolder;
  font-size: large;
}
td{
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div style="padding-top: 300px;padding-left: 300px;">
<table>
<tr>
<td colspan="2">
<input type="button" class="cbuttons" value="CE">
</td>
</tr>
<tr>
<td>
<input type="button" class="buttons" value="7">
</td>
<td>
<input type="button" class="buttons" value="8">
</td>
<td>
<input type="button" class="buttons" value="9">
</td>
</tr>
<tr>
<td>
<input type="button" class="buttons" value="4">
</td>
<td>
<input type="button" class="buttons" value="5">
</td>
<td>
<input type="button" class="buttons" value="6">
</td>
</tr>
<tr>
<td>
<input type="button" class="buttons" value="1">
</td>
<td>
<input type="button" class="buttons" value="2">
</td>
<td>
<input type="button" class="buttons" value="3">
</td>
</tr>
</table>
</div>
</body>
<script src="jsfile.js" type="text/javascript"></script>
</html>

按钮值未显示 -javascript

button value not displayed -javascript

html

javascript

properties