How to create a box where I can add text using JavaScript for my calculator project?
Question
how to create a box where I can add text using JavaScript? I'm currently doing a calculator with CSS, HTML and JavaScript. The thing is that I don't know how to create a box where I can add text with JavaScript. Would a Input or a regular div be better?
3 answers
solution1
0 2021-02-25 17:20:12
That is pretty straight forward:
The box
The easiest way you could use a normal Paragraph (<p>) and give it a border with css.
HTML:
<p class="box">Text goes here</p>
CSS:
.box {
border: 1px solid black;
}
Or you could wrap the text in a div to center it there:
HTML:
<div class="box">
<p class="text">Content</p>
</div>
CSS:
.box {
width: 300px;
height: 100px;
display: table;
border: 1px solid black;
}
.text {
text-align: center;
vertical-align: middle;
display: table-cell;
}
With this your text is vertically and horizontally centered inside the div. The dimensions are adjustable with width and height in.box
For docu about the border property check out this page: w3schools.com
Changing the text with javascript
With document.getElementById() you can get the element itself and then you can set the text with innerHTML like so:
First give you Element a ID:
<div class="box">
<p class="text" id="calculatorOutput">Content</p>
</div>
Then in javascript manipulate the value:
let calculationResult = 500 * 10; // Example calculation
document.getElementById("calculatorOutput").innerHTML = calculationResult;
But over all there dozens of ways to approach this. It depends on your needs.
solution2
0 2021-02-25 17:25:08
You need something like this:
let buttons = document.querySelectorAll(".btns"); let text = document.getElementById("textArea"); buttons.forEach((button)=>{ button.addEventListener('click', ()=>{ text.innerHTML += button.innerText; }); });
#textArea { width: 150px; height: 100px; resize: none; padding: 5px; font-size: 20px; }.container, .btn-container { display: flex; align-items: center; justify-content: center; }.container { flex-direction: column; }
<div class="container"> <textarea id="textArea"></textarea> </div> <div class="btn-container"> <button class="btns">1</button> <button class="btns">2</button> <button class="btns">3</button> </div>
solution3
0 2021-02-25 17:28:01
*{ margin:0px; padding: 0px; }.button{ width:50px; height: 50px; font-size: 25px; margin: 2px; cursor: pointer; }.textview{ width: 200px; margin: 5px; font-size: 25px; padding: 5px; }
<body> <div class="main"> <form name="form"> <input class="textview" name="textview"> <table> <tr> <td><input class="button" type="button" value="C"></td> <td><input class="button" type="button" value="<"></td> <td><input class="button" type="button" value="/"></td> <td><input class="button" 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 class="button" type="button" value="5"></td> <td><input class="button" type="button" value="6"></td> <td><input class="button" type="button" value="+"></td> </tr> <tr> <td><input class="button" type="button" value="1" onclick="insert(1)"></td> <td><input class="button" type="button" value="2"></td> <td><input class="button" type="button" value="3"></td> <td><input class="button" type="button" value="="></td> </tr> </table> </form> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.