javascript - 使用 Javascript 的计算器
问题描述
我正在尝试使用 Vanilla Javascript 制作一个简单的计算器。有一个div
主内容类,其下有一个 ID 为 的文本框displaytext
。此外,有 3 行,每行包含数字,然后是另一行包含符号。我附上了下面的代码以供参考。
const displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable
const seven = document.getElementById("seven");
seven.addEventListener('click',function () {
displayText.value+=seven.value;
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .main-content{
display: flex;
justify-content: center;
align-items: center;
} */
.heading{
margin: 20px;
padding:15px;
}
.heading h2{
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 45px;
font-weight: 800;
margin-left: -20px;
}
.main-content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 75vh;
background-color: rgb(255, 49, 49,0.5);
width: 30%;
margin: 0px 520px;
border: 3px solid rgb(197, 95, 0);
border-radius: 30px;
}
.row1,.row2,.row3,.row4{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* margin: 10px; */
padding: 10px;
margin-left: -70px;
}
.element{
padding:25px;
background-color: white;
text-align: center;
margin: 7.5px;
font-size: 25px;
font-family: 'Roboto', sans-serif;
border: 4px solid rgb(102, 102, 102);
border-radius: 15px;
cursor: pointer;
width: 50%;
}
.symbol{
display: flex;
flex-direction: column;
/* align-items: flex-end; */
/* justify-content: right; */
margin-top: -355px;
margin-left: 300px;
}
.symbol-element{
padding: 17.5px;
margin: 10px 0px;
border: 4px solid rgb(102, 102, 102);
font-size: 25px;
font-family: 'Roboto', sans-serif;
border-radius: 15px;
cursor: pointer;
width: 120%;
text-align: center;
height: 66px;
/* transition: 0.5s ease-in-out; */
}
.displaytext{
border-radius: 10px;
/* margin-left: 5px; */
height: 100px;
width: 75%;
padding: 20px;
/* margin: 20px 0px; */
margin-left: 35px;
margin-top: 20px;
border: none;
font-size: 17px;
/* transition: 5s ease-in-out; */
}
.element,.symbol-element,.displaytext:focus{
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/calculator/style.css">
</head>
<body>
<!-- main-container starts here -->
<div class="main-container">
<div class="heading">
<h2>Calculator</h2>
</div>
<form class="main-content">
<input type="text" class="displaytext" name="displaytext" id="displaytext">
<div class="row1">
<button class="element" value="7" id="seven">7</button>
<button class="element" value="8">8</button>
<button class="element" value="9">9</button>
</div>
<div class="row2">
<button class="element" value="1">1</button>
<button class="element" value="2">2</button>
<button class="element" value="3">3</button>
</div>
<div class="row3">
<button class="element" value="4">4</button>
<button class="element" value="5">5</button>
<button class="element" value="6">6</button>
</div>
<div class="symbol">
<button class="symbol-element" value="+">+</button>
<button class="symbol-element" value="-">-</button>
<button class="symbol-element" value="*">*</button>
<button class="symbol-element" value="/">/</button>
</div>
<!-- main-content ends here -->
</div>
<!-- outer div ends here -->
<script src="/calculator/script.js"></script>
</body>
</html>
这里的问题是,每当我运行命令displayText.value+=seven.value;
时,该值会出现在文本框中只是一瞬间。我该如何解决。
解决方案
button
s 是表单元素,它们的默认type
值为submit
,为按钮添加type="button"
属性,因此它们不会发送表单。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
HTML
<button>
元素表示一个可单击的按钮,用于提交表单或文档中的任何位置,以实现可访问的标准按钮功能。默认情况下,HTML 按钮以类似于用户代理运行平台的样式呈现,但您可以使用 CSS 更改按钮的外观。
const displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable
const seven = document.getElementById("seven");
seven.addEventListener('click',function () {
displayText.value+=seven.value;
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .main-content{
display: flex;
justify-content: center;
align-items: center;
} */
.heading{
margin: 20px;
padding:15px;
}
.heading h2{
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 45px;
font-weight: 800;
margin-left: -20px;
}
.main-content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 75vh;
background-color: rgb(255, 49, 49,0.5);
width: 30%;
margin: 0px 520px;
border: 3px solid rgb(197, 95, 0);
border-radius: 30px;
}
.row1,.row2,.row3,.row4{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* margin: 10px; */
padding: 10px;
margin-left: -70px;
}
.element{
padding:25px;
background-color: white;
text-align: center;
margin: 7.5px;
font-size: 25px;
font-family: 'Roboto', sans-serif;
border: 4px solid rgb(102, 102, 102);
border-radius: 15px;
cursor: pointer;
width: 50%;
}
.symbol{
display: flex;
flex-direction: column;
/* align-items: flex-end; */
/* justify-content: right; */
margin-top: -355px;
margin-left: 300px;
}
.symbol-element{
padding: 17.5px;
margin: 10px 0px;
border: 4px solid rgb(102, 102, 102);
font-size: 25px;
font-family: 'Roboto', sans-serif;
border-radius: 15px;
cursor: pointer;
width: 120%;
text-align: center;
height: 66px;
/* transition: 0.5s ease-in-out; */
}
.displaytext{
border-radius: 10px;
/* margin-left: 5px; */
height: 100px;
width: 75%;
padding: 20px;
/* margin: 20px 0px; */
margin-left: 35px;
margin-top: 20px;
border: none;
font-size: 17px;
/* transition: 5s ease-in-out; */
}
.element,.symbol-element,.displaytext:focus{
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/calculator/style.css">
</head>
<body>
<!-- main-container starts here -->
<div class="main-container">
<div class="heading">
<h2>Calculator</h2>
</div>
<form class="main-content">
<input type="text" class="displaytext" name="displaytext" id="displaytext">
<div class="row1">
<button class="element" value="7" id="seven" type="button">7</button>
<button class="element" value="8">8</button>
<button class="element" value="9">9</button>
</div>
<div class="row2">
<button class="element" value="1">1</button>
<button class="element" value="2">2</button>
<button class="element" value="3">3</button>
</div>
<div class="row3">
<button class="element" value="4">4</button>
<button class="element" value="5">5</button>
<button class="element" value="6">6</button>
</div>
<div class="symbol">
<button class="symbol-element" value="+">+</button>
<button class="symbol-element" value="-">-</button>
<button class="symbol-element" value="*">*</button>
<button class="symbol-element" value="/">/</button>
</div>
<!-- main-content ends here -->
</div>
<!-- outer div ends here -->
<script src="/calculator/script.js"></script>
</body>
</html>
您还可以同时处理循环上的点击功能和属性类型
let displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable
let btn = document.querySelectorAll(".element, .symbol-element"); // find all our calculator buttons
for (let i = 0; i < btn.length; i++) {// loop through btn found
btn[i].setAttribute("type", "button"); // remove the submit behavior
btn[i].addEventListener("click", function() {
displayText.value += this.value; // add to display text the button value
});
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading {
margin: 20px;
padding: 15px;
}
.heading h2 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 45px;
font-weight: 800;
margin-left: -20px;
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 75vh;
background-color: rgb(255, 49, 49, 0.5);
width: 30%;
margin: 0px 520px;
border: 3px solid rgb(197, 95, 0);
border-radius: 30px;
}
.row1,
.row2,
.row3,
.row4 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* margin: 10px; */
padding: 10px;
margin-left: -70px;
}
.element {
padding: 25px;
background-color: white;
text-align: center;
margin: 7.5px;
font-size: 25px;
font-family: 'Roboto', sans-serif;
border: 4px solid rgb(102, 102, 102);
border-radius: 15px;
cursor: pointer;
width: 50%;
}
.symbol {
display: flex;
flex-direction: column;
/* align-items: flex-end; */
/* justify-content: right; */
margin-top: -355px;
margin-left: 300px;
}
.symbol-element {
padding: 17.5px;
margin: 10px 0px;
border: 4px solid rgb(102, 102, 102);
font-size: 25px;
font-family: 'Roboto', sans-serif;
border-radius: 15px;
cursor: pointer;
width: 120%;
text-align: center;
height: 66px;
/* transition: 0.5s ease-in-out; */
}
.displaytext {
border-radius: 10px;
/* margin-left: 5px; */
height: 100px;
width: 75%;
padding: 20px;
/* margin: 20px 0px; */
margin-left: 35px;
margin-top: 20px;
border: none;
font-size: 17px;
/* transition: 5s ease-in-out; */
}
.element,
.symbol-element,
.displaytext:focus {
outline: none;
}
<!-- main-container starts here -->
<div class="main-container">
<div class="heading">
<h2>Calculator</h2>
</div>
<form class="main-content">
<input type="text" class="displaytext" name="displaytext" id="displaytext">
<div class="row1">
<button class="element" value="7">7</button>
<button class="element" value="8">8</button>
<button class="element" value="9">9</button>
</div>
<div class="row2">
<button class="element" value="1">1</button>
<button class="element" value="2">2</button>
<button class="element" value="3">3</button>
</div>
<div class="row3">
<button class="element" value="4">4</button>
<button class="element" value="5">5</button>
<button class="element" value="6">6</button>
</div>
<div class="symbol">
<button class="symbol-element" value="+">+</button>
<button class="symbol-element" value="-">-</button>
<button class="symbol-element" value="*">*</button>
<button class="symbol-element" value="/">/</button>
</div>
<!-- main-content ends here -->
</form>
<!-- outer div ends here -->
</div>
推荐阅读
- php - 找不到类“SoapClient”(laravel)
- javascript - Google Workspace 插件错误:TypeError:无法读取未定义的属性“stringInputs”
- .net - 需要更改 IE 中的设置以查看在 .net 中开发的 Web 应用程序的下拉列表
- flutter - Flutter 通过 API 上传数据
- laravel - 将请求重定向到 http 和 https
- python - 从 Python 中的多个变量中获取单个返回变量的输出
- python - 如何通过python(DAG)通过字典输入创建路径
- c# - 如何将引导模板集成到Angular中,请以正确的方式举例
- python - 如何获取列表元素的组合?
- database - 就处理遗留数据项或列的新数据库设计而言,最好的方法是什么?