如何在 HTML 中的按钮之前在 JavaScript 中添加一个按钮？
[英]How do I add a button in JavaScript, before a Button in HTML?
问题描述
I'm trying to make a calculator of some sort, but I want to put buttons in javascript before a button I made in HTML.
我正在尝试制作某种计算器，但我想在 HTML 中制作按钮之前将按钮放在 javascript 中。
I want my Memory buttons (MS, MC, MR), before my clear button(C), and I've been trying everything and just seem to be a bit stumped.我想要我的 Memory 按钮（MS、MC、MR），在我的清除按钮（C）之前，我一直在尝试一切，但似乎有点难过。
I've been try ing to use the insertBefore() method but I think I'm doing that wrong.我一直在尝试使用 insertBefore() 方法，但我认为我做错了。 Thank you,谢谢，
JavaScript (at the bottom is my error): JavaScript（底部是我的错误）：
//3.
//Changing colors of opertion colors
//Multiply Color
const colorMultiply = document.getElementById('multiply')
colorMultiply.style.backgroundColor = "green"
//Divide Color
const colorDivide = document.getElementById('divide')
colorDivide.style.backgroundColor = "red"
//subtract color
const colorSubtract = document.getElementById('subtract')
colorSubtract.style.backgroundColor="blue"
//add color
const colorAdd = document.getElementById('add')
colorAdd.style.backgroundColor="yellow"
//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)
const number1 = document.getElementById('number1')
number1.style.color="blue"
const number2 = document.getElementById('number2')
number2.style.color="blue"
const number3 = document.getElementById('number3')
number3.style.color="blue"
const number4 = document.getElementById('number4')
number4.style.color="blue"
const number5 = document.getElementById('number5')
number5.style.color="blue"
const number6 = document.getElementById('number6')
number6.style.color="blue"
const number7 = document.getElementById('number7')
number7.style.color="blue"
const number8 = document.getElementById('number8')
number8.style.color="blue"
const number9 = document.getElementById('number9')
number9.style.color="blue"
const number0 = document.getElementById('number0')
number0.style.color="blue"
const decimal = document.getElementById('decimal')
decimal.style.color="blue"
//Changing color of the clear button
const clear = document.getElementById('clear')
clear.style.color="white"
clear.style.backgroundColor="black"
///////////////////////////////////////////////////////////////////////////////////////////////////////
/*
var memoryStoreButton = document.createElement('BUTTON')
memoryStoreButton.innerHTML = "MS"
document.body.appendChild(memoryStoreButton)
var memoryClearButton = document.createElement('BUTTON')
memoryClearButton.innerHTML = "MC"
document.body.appendChild(memoryClearButton)
var memoryRestoreButton = document.createElement('BUTTON')
memoryRestoreButton.innerHTML = "MR"
document.body.appendChild(memoryRestoreButton)
*/
HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Calculator 8 </title>
<script src="fp.js" defer></script>
<link rel="stylesheet" href="fp.css">
</head>
<body>
<section class="calculator8">
<h1> Calculator 8 </h1>
<form>
<input type="text" name="" id="" class="screen8">
</form>
<div class="buttons8">
<!-- operation buttons -->
<button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
<button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
<button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
<button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
<!-- number buttons -->
<button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
<button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
<button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
<button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
<button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
<button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
<button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
<button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
<button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
<button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
<button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
<button id="equals" type="button" class="btn8 btn-grey">=</button>
<button id="clear" type="button" class="btn8 btn-grey">C</button>
</div>
</section>
</body>
</html>
2 个解决方案
解决方案1
0 2020-04-12 01:26:22
You can call before() firstly on the clear button with the button to add before it and then as you add elements you can add the new one before the existing others.您可以首先在clear按钮上调用before()并在其之前添加按钮，然后在添加元素时，您可以在现有其他元素之前添加新元素。 Something like:就像是：
// Insert `memoryStoreButton` before the `clear` button:
var memoryStoreButton = document.createElement("BUTTON");
memoryStoreButton.innerHTML = "MS";
clear.before(memoryStoreButton);
// Insert `memoryClearButton` before `memoryStoreButton`
var memoryClearButton = document.createElement("BUTTON");
memoryClearButton.innerHTML = "MC";
memoryStoreButton.before(memoryClearButton);
// and finally, insert the `memoryRestoreButton` before `memoryClearButton`
var memoryRestoreButton = document.createElement("BUTTON");
memoryRestoreButton.innerHTML = "MR";
memoryClearButton.before(memoryRestoreButton);
//3. //Changing colors of opertion colors //Multiply Color const colorMultiply = document.getElementById("multiply"); colorMultiply.style.backgroundColor = "green"; //Divide Color const colorDivide = document.getElementById("divide"); colorDivide.style.backgroundColor = "red"; //subtract color const colorSubtract = document.getElementById("subtract"); colorSubtract.style.backgroundColor = "blue"; //add color const colorAdd = document.getElementById("add"); colorAdd.style.backgroundColor = "yellow"; //change font of numbers to blue (I did it like this incase anyone wants to color of a single number) const number1 = document.getElementById("number1"); number1.style.color = "blue"; const number2 = document.getElementById("number2"); number2.style.color = "blue"; const number3 = document.getElementById("number3"); number3.style.color = "blue"; const number4 = document.getElementById("number4"); number4.style.color = "blue"; const number5 = document.getElementById("number5"); number5.style.color = "blue"; const number6 = document.getElementById("number6"); number6.style.color = "blue"; const number7 = document.getElementById("number7"); number7.style.color = "blue"; const number8 = document.getElementById("number8"); number8.style.color = "blue"; const number9 = document.getElementById("number9"); number9.style.color = "blue"; const number0 = document.getElementById("number0"); number0.style.color = "blue"; const decimal = document.getElementById("decimal"); decimal.style.color = "blue"; //Changing color of the clear button const clear = document.getElementById("clear"); clear.style.color = "white"; clear.style.backgroundColor = "black"; /////////////////////////////////////////////////////////////////////////////////////////////////////// // Then we want to insert `memoryStoreButton` before the `clear` button: var memoryStoreButton = document.createElement("BUTTON"); memoryStoreButton.innerHTML = "MS"; clear.before(memoryStoreButton); // Then we want the `memoryClearButton` before `memoryStoreButton` var memoryClearButton = document.createElement("BUTTON"); memoryClearButton.innerHTML = "MC"; memoryStoreButton.before(memoryClearButton); // and finally, the `memoryRestoreButton` before `memoryClearButton` var memoryRestoreButton = document.createElement("BUTTON"); memoryRestoreButton.innerHTML = "MR"; memoryClearButton.before(memoryRestoreButton);
<h1>Calculator 8</h1> <form> <input type="text" name="" id="" class="screen8" /> </form> <div class="buttons8"> <.-- operation buttons --> <button id="multiply" type="button" class="btn8 btn-mul" data-num="*"> * </button> <button id="divide" type="button" class="btn8 btn-div" data-num="/"> / </button> <button id="subtract" type="button" class="btn8 btn-sub" data-num="-"> - </button> <button id="add" type="button" class="btn8 btn-add" data-num="+"> + </button> <.-- number buttons --> <button id="decimal" type="button" class="btn8 btn-grey" data-num="."> . </button> <button id="number9" type="button" class="btn8 btn-grey" data-num="9"> 9 </button> <button id="number8" type="button" class="btn8 btn-grey" data-num="8"> 8 </button> <button id="number7" type="button" class="btn8 btn-grey" data-num="7"> 7 </button> <button id="number6" type="button" class="btn8 btn-grey" data-num="6"> 6 </button> <button id="number5" type="button" class="btn8 btn-grey" data-num="5"> 5 </button> <button id="number4" type="button" class="btn8 btn-grey" data-num="4"> 4 </button> <button id="number3" type="button" class="btn8 btn-grey" data-num="3"> 3 </button> <button id="number2" type="button" class="btn8 btn-grey" data-num="2"> 2 </button> <button id="number1" type="button" class="btn8 btn-grey" data-num="1"> 1 </button> <button id="number0" type="button" class="btn8 btn-grey" data-num="0"> 0 </button> <button id="equals" type="button" class="btn8 btn-grey">=</button> <button id="clear" type="button" class="btn8 btn-grey">C</button> </div> </section>
The ChildNode.before() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just before this ChildNode.
解决方案2
0 2020-04-12 10:25:00
Why are trying to insert buttons dynamically?为什么要尝试动态插入按钮？ I presume you want to toggle expanded controls.我想你想切换扩展控件。
Doing this with javascript is nasty.用 javascript 做这件事很讨厌。
Just put all html buttons in and use css to show/hide the buttons you want to toggle.只需将所有 html 按钮放入并使用 css 显示/隐藏您要切换的按钮。
Use Javascript to toggle the css class on the container使用 Javascript 切换容器上的 css class
<button id="mc" type="button" class="btn8 btn-grey advanced">MC</button>
.calculator8 .advanced { display: none; }
.calculator8.showAdvanced .advanced { display: block; }
document.querySelector('.calulator8').classList.toggle("showAdvanced")
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何为此JavaScript / HTML代码添加一个按钮，以便我的代码仅在按下按钮后才会运行？ - How do i add a button to this JavaScript/HTML code, so that my code only runs once the button is pressed?
如何将Javascript添加到HTML按钮 - How To Add Javascript To HTML Button
如何在此JavaScript和HTML代码中添加按钮，以便在按下按钮时，交通信号灯序列运行一次？ - How do i add a button to this JavaScript and HTML code so that when i press the button, my traffic light sequence runs once?
如何在不使用 HTML 中的 javascript 的情况下向按钮添加功能 - how do you add functionality to a button without using javascript in HTML
如何在 html 和 JavaScript 的按钮前插入文本框？ - How to insert a textbox before a button in html and JavaScript?
如何使用javascript或jquery向html按钮添加另一个验证功能？ - How do I add another validation function to an html button using javascript or jquery?
如何在 html javascript 飞禽类游戏中添加重启按钮？ - How do I add a restart button in html javascript flappy bird type game?
有一个带有链接Java脚本的HTML文档，当我单击提交按钮时，我试图添加一条警报消息。 我该怎么做呢？ - have an HTML document with a linked Javascript I am trying to add an alert message when a submit button is clicked. How do I do this?
如何像 Wysiwyg 一样在 Quill 中添加“显示 html”按钮？ - How do I add “show html” button in Quill like in Wysiwyg?
如何通过 jquery 向 HTML 表添加单选按钮 - How do I add a radio button to HTML table via jquery
相关标签