Question

我有一个HTML文档，我正在尝试构建简单的calc

的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);
            }
        }
    }

我正在尝试获取按钮的值，我在警告（element.value）中 3 ; 我想要的东西：当按下3时我必须提醒你纠正我如果我错了代码。

由于

Answer 1

你快到了。而不是element.value，请使用this.value。

＆＃13;

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);
            }
        }
    }

＆＃13;

<!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>

＆＃13;

按钮值未显示-javascript

1 个答案: