Как добавить кнопку в JavaScript, перед кнопкой в ​​HTML? - PullRequest
Новая
       11

Как добавить кнопку в JavaScript, перед кнопкой в ​​HTML?

0 голосов
/ 12 апреля 2020

Я пытаюсь сделать какой-то калькулятор, но я хочу поместить кнопки в javascript перед кнопкой, которую я сделал в HTML.

Я хочу свои кнопки памяти (MS, M C, 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>

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Почему пытаются вставить кнопки динамически? Я предполагаю, что вы хотите переключать расширенные элементы управления.

Делать это с 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")
0 голосов
/ 12 апреля 2020

Вы можете вызвать before() сначала с помощью кнопки clear, добавив перед ней кнопку, а затем, добавляя элементы, можете добавлять новый перед существующими другими. Что-то вроде: 

// 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>

Метод ChildNode.before () вставляет набор объектов Node или DOMString в список потомков родителя этого ChildNode, непосредственно перед этим ChildNode. Объекты DOMString вставляются как эквивалентные текстовые узлы.

...