Простой калькулятор в html / javascript

Пытаюсь сделать калькулятор с html и JavaScript. После нажатия на кнопку я пытаюсь вставить номер в свой div. Когда я это сделаю, значение по умолчанию «0» исчезнет, и он вообще ничего не вставит.

    function copy(event) {
        var newValue = event.target.value;
        document.querySelector("#display").innerHTML = newValue;
    }

    var textfield = document.querySelector("#btn_7");
    textfield.addEventListener("click", copy);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id = "frame">
  <div id = "display">0</div>
  <button id = "btn_7">7</button>
  <button id = "btn_8">8</button>
  <button id = "btn_9">9</button>
  <button id = "btn_div">/</button>
  <button id = "btn_4">4</button>
  <button id = "btn_5">5</button>
  <button id = "btn_6">6</button>
  <button id = "btn_prod">*</button>
  <button id = "btn_1">1</button>
  <button id = "btn_2">2</button>
  <button id = "btn_3">3</button>
  <button id = "btn_min">-</button>
  <button id = "btn_clear">C</button>
  <button id = "btn_0">0</button>
  <button id = "btn_eq">=</button>
  <button id = "btn_plus">+</button>
</div>

Если я добавлю строку в переменную newValue, она отобразится в моем div. Это означает, что когда я нажимаю кнопку, он ничего не передает в div. Есть ли способ решить эту проблему?

А по поводу var textfield = document.querySelector("#btn_7");

На данный момент я должен сделать это для каждой кнопки, и это займет много строк, есть ли лучший способ сделать это?

Фактически, вы можете просто заменить textfield.addEventListener("click", copy); на document.querySelector("#frame").addEventListener("click", copy);, поскольку event.target уже заботится о делегировании событий. Хотя, возможно, вы захотите проверить что-нибудь вроде if (event.target.matches("button")).

— 24.04.2018 21:22

javascript jquery html css calculator

24.04.2018 21:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

938

Ответы 3

У кнопок нет атрибута по умолчанию value, поэтому в этом случае используйте атрибут textContent.

Я рекомендую вам использовать скрытый ввод для хранения значений или вы также можете использовать data-attributes.

For now i have to make this for each button and that will take alot of rows is there a better way to do so?

Вы можете использовать функцию document.querySelectorAll(selector) и перебрать ее, чтобы привязать конкретное событие.

function copy(event) {
  var newValue = event.target.textContent;
  document.querySelector("#display").innerHTML = newValue;
}

Array.prototype.forEach.call(document.querySelectorAll('button'), function(b) {
  b.addEventListener("click", copy);
});

<div id = "frame">
  <div id = "display">0</div>
  <button id = "btn_7">7</button>
  <button id = "btn_8">8</button>
  <button id = "btn_9">9</button>
  <button id = "btn_div">/</button>
  <button id = "btn_4">4</button>
  <button id = "btn_5">5</button>
  <button id = "btn_6">6</button>
  <button id = "btn_prod">*</button>
  <button id = "btn_1">1</button>
  <button id = "btn_2">2</button>
  <button id = "btn_3">3</button>
  <button id = "btn_min">-</button>
  <button id = "btn_clear">C</button>
  <button id = "btn_0">0</button>
  <button id = "btn_eq">=</button>
  <button id = "btn_plus">+</button>
</div>

Большое спасибо за ваше решение

— 25.04.2018 09:46

24.04.2018 21:17

Здесь нужно выбрать значение и заменить html отображаемого div. Вам нужно сделать некоторые дополнительные вещи, чтобы достичь желаемого результата.

var display = $('#display');
$('.btn').click(function(e) {
  var btn = e.target;
  display.html(btn.id);
});

<script type = "text/javascript" src = "https://code.jquery.com/jquery-latest.min.js"></script>
<div id = "frame">
<div id = "display">0</div>
<button class = "btn" id = "btn_7">7</button>
<button class = "btn"  id = "btn_8">8</button>
<button class = "btn"  id = "btn_9">9</button>
<button class = "btn"  id = "btn_div">/</button>
<button class = "btn"  id = "btn_4">4</button>
<button class = "btn"  id = "btn_5">5</button>
<button class = "btn"  id = "btn_6">6</button>
<button class = "btn"  id = "btn_prod">*</button>
<button class = "btn"  id = "btn_1">1</button>
<button class = "btn"  id = "btn_2">2</button>
<button class = "btn"  id = "btn_3">3</button>
<button class = "btn"  id = "btn_min">-</button>
<button class = "btn"  id = "btn_clear">C</button>
<button class = "btn"  id = "btn_0">0</button>
<button class = "btn"  id = "btn_eq">=</button>
<button class = "btn"  id = "btn_plus">+</button>
</div>

Зачем вообще добавлять классы? Просто используйте $("#display").on("click", "button", function(e){… });. Кроме того, ID не добавляется; внутренний текст есть.

— 24.04.2018 21:26

Просто чтобы различать, для каких кнопок нужен этот обработчик кликов. Возможно, OP не хочет делать то же самое для некоторых других кнопок.

— 24.04.2018 21:28

24.04.2018 21:24

попробуй вот так

$(function(){
	
	$('button[id^ = "btn_"]').click(function(){
		var display;
		if ($('.tmp').length > 0){
			display = $('.tmp').text();
		}else{
			$( "<p class='tmp' style='display:none;'></p>" ).appendTo( "#frame" );
			display = '';
		}
		switch($(this).text()){
			case 'C' :
				display = '0';
			break;
			case '=' :
				display = eval(display);
			break;
			default :
				display = display.concat($(this).text());
		}
		$('#display').text(display);
		$('.tmp').text((display != '0') ? display : '');
	});
	
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "frame">
	<div id = "display">0</div>
	<button id = "btn_7">7</button>
	<button id = "btn_8">8</button>
	<button id = "btn_9">9</button>
	<button id = "btn_div">/</button><br/>
	<button id = "btn_4">4</button>
	<button id = "btn_5">5</button>
	<button id = "btn_6">6</button>
	<button id = "btn_prod">*</button><br/>
	<button id = "btn_1">1</button>
	<button id = "btn_2">2</button>
	<button id = "btn_3">3</button>
	<button id = "btn_min">-</button><br/>
	<button id = "btn_clear">C</button>
	<button id = "btn_0">0</button>
	<button id = "btn_eq">=</button>
	<button id = "btn_plus">+</button>
</div>

Большое спасибо за ваше решение

— 25.04.2018 09:46

24.04.2018 23:20