javascript - 如何在 HTML 中的按钮之前在 JavaScript 中添加一个按钮?
问题描述
我正在尝试制作某种计算器,但我想将 javascript 中的按钮放在我用 HTML 制作的按钮之前。
我想要我的记忆按钮(MS、MC、MR),在我的清除按钮(C)之前,我一直在尝试一切,但似乎有点难过。
我一直在尝试使用 insertBefore() 方法,但我认为我做错了。谢谢,
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:
<!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>
解决方案
为什么要尝试动态插入按钮?我想你想切换扩展控件。
用 javascript 做这件事很讨厌。
只需将所有 html 按钮放入并使用 css 显示/隐藏您要切换的按钮。
使用 Javascript 切换容器上的 css 类
<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")
推荐阅读
- html - html中css自动完成的扩展
- inheritance - Proper use of polymorphism / inheritance in Open API 3
- sapui5 - UI5 有时会抛出错误:无法找到带有 ID 的控件 - EventProvider sap.m.routing.Target
- python-3.x - Pandas 增加滚动日期
- excel - Deleting Rows Based on Cell Value Criteria in a Column, for All Worksheets
- jmeter - How do i view all transactions in JMeter Report
- javascript - 使用 Switch 语句隐藏 Aurelia 中的 div
- python - MNIST 数字的神经网络根本没有学习——反向传播的问题
- javascript - Find all elements in array that contain the search key
- javascript - Why is my callback not taking the result?