使用JavaScript将按钮中的字符串添加到HTML字段
[英]Adding a string from buttons to a HTML field using JavaScript
问题描述
So I'm making a small calculator using HTML, Bootstrap and JavaScript. 
所以我正在使用HTML，Bootstrap和JavaScript制作一个小型计算器。 Here is a screenshot of the calculator (unfinished): 这是计算器的截图（未完成）：
What I need is to add the calculation the user wants to perform into the field on top of that calculator as a string then evaluate that string. 我需要的是将用户想要执行的计算添加到该计算器之上的字段中作为字符串然后评估该字符串。 For example: The user wants to calculate 1 + 3. So they would click the "1", the "+" button and the "3" button and they would appear in the "My body is ready" field. 例如：用户想要计算1 + 3.所以他们会点击“1”，“+”按钮和“3”按钮，它们会出现在“我的身体就绪”字段中。 I want to do this using JavaScript, how can this be done? 我想用JavaScript做到这一点，怎么做到这一点？
Here is the HTML/Bootstrap I've written for the calculator. 这是我为计算器编写的HTML / Bootstrap。
<head>
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form>
<div class="form-group">
<input type="text" class="form-control" id="calculation_body" placeholder="My body is ready.">
</div>
</form>
{{> buttons}}
</body>
<template name="buttons">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-danger">C</button>
<button tpye="button" class="btn btn-warning">D</button>
<button type="button" class="btn btn-primary">÷</button>
<button type="button" class="btn btn-primary">x</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
<button type="button" class="btn btn-default">9</button>
<button type="button" class="btn btn-primary">-</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-primary">+</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-primary">%</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">.</button>
<button type="button" class="btn btn-default">0</button>
<button type="button" class="btn btn-default">()</button>
<button type="button" class="btn btn-success">=</button>
</div>
</div>
</div>
</div>
</template>
1 个解决方案
解决方案1
2 2015-10-04 09:52:22
What you are searching for is Element.innerHTML . 您要搜索的是Element.innerHTML 。
I've created a code snippet for you where I've prepared the "3", "+" and "1". 我为你准备了“3”，“+”和“1”的代码片段。 I added a click listener like this onclick="onClick(this)" . 我添加了一个像这样的点击监听器onclick="onClick(this)" 。 The function "onClick" then adds the innerHTML of the button to the innerHTML of the div with the id "display" ( display.innerHTML += button.innerHTML; ). 函数“onClick”然后将按钮的innerHTML添加到div的innerHTML，其id为“display”（ display.innerHTML += button.innerHTML; ）。
You just have to prepare every button with this behavior. 您只需使用此行为准备每个按钮。 Please note that there are other options available to add the click listener to the buttons. 请注意，还有其他选项可用于将单击侦听器添加到按钮。 Check out the object.onclick=function(){myScript}; 查看object.onclick=function(){myScript}; concept here . 这里的概念。
Also, the getElementsByTagName method will help you out. 此外， getElementsByTagName 方法将帮助您。
function onClick(button) { var display = document.getElementById("display"); display.innerHTML += button.innerHTML; }
<div id="display"></div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-danger">C</button> <button tpye="button" class="btn btn-warning">D</button> <button type="button" class="btn btn-primary">÷</button> <button type="button" class="btn btn-primary">x</button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default">8</button> <button type="button" class="btn btn-default">9</button> <button type="button" class="btn btn-primary">-</button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" onclick="onClick(this)" class="btn btn-primary">+</button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" role="group" aria-label=""> <button type="button" onclick="onClick(this)" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" onclick="onClick(this)" class="btn btn-default">3</button> <button type="button" class="btn btn-primary">%</button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" role="group" aria-label=""> <button type="button" class="btn btn-default">.</button> <button type="button" class="btn btn-default">0</button> <button type="button" class="btn btn-default">()</button> <button type="button" class="btn btn-success">=</button> </div> </div> </div> </div>
Further reading: 进一步阅读：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.