Вычислить входное значение и обновить 3 результата при нажатии кнопки расчета с помощью JavaScript

У меня есть 4 вычисления, которые я настроил для выдачи результатов при вводе целого числа от 1 до 100. прямо сейчас значения автоматически обновляются по мере того, как я печатаю, но я хочу, чтобы они подождали, пока не будет нажата кнопка расчета. Я не могу понять, что я сделал не так или чего мне не хватает.

let phoneOutput = document.getElementById("rc-phone");
let carOutput = document.getElementById("rc-car");
let trashOutput = document.getElementById("rc-trash");
let monthlyCost = document.getElementById("monthly-cost");
let input = document.getElementById("customPercent");
let ggrResults = document.querySelector("#customPercent");

ggrResults.addEventListener('input', e => adjustData(e.target.value)) // had to add in .value in order to extract the text from the input
const adjustData = (a) => {
//   convert value from input text to number in order to calculate
  const numberConvert = Number(a);
  const decimal = numberConvert/100;
  const monthlyCostFormula = (8000 * decimal) * (.026/12);
  const trashBagFormula = 243 * decimal;
  const milesDrivenFormula = 14294 * decimal;
  const phonesChargedFormula = 368949 * decimal;
  monthlyCost.innerHTML = monthlyCostFormula.toFixed(2);
  trashOutput.innerHTML = Math.round(trashBagFormula);
  carOutput.innerHTML = Math.round(milesDrivenFormula);
  phoneOutput.innerHTML = Math.round(phonesChargedFormula);
}

<form method = "post">
  <input id = "customPercent"  type = "text" placeholder = "custom" />
  <button type = "submit" onclick = "return(adjustData());" id = "submit">Calculate</button>
</form>
<div>
  <h6>Equal to Removing</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-trash">100</span><br>
  <span class = "green-text small-txt">Trash Bags of Waste from the Environment</span>
</div>
<div>    
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-car">20</span><br>
  <span class = "green-text small-txt">Gas-Powered Miles Driven</span>
</div>
<div>
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-phone">500</span><br>
  <span class = "green-text small-txt">Smartphones Charged</span>
</div>
<div>
  <h4 class = "heading-4">Estimated Monthly Cost <a href = "#" data-toggle = "tooltip" title = "This will have an explanation"><i class = "fa fa-info-circle gray"></i></a></h4>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;">$<span id = "monthly-cost">15.00</span></span>
  <h5>per month</h5>   
</div>

Я думаю, вам нужно удалить прослушиватель событий и сохранить функцию onclick кнопки. Затем измените const NumberConvert = Number(a), чтобы позволить NumberConvert = ggrResults.value. В onclick = "return(adjustData()) вам не нужен возврат

— 20.08.2024 19:22

javascript dom-events form-submit

20.08.2024 19:07

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

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

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

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

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

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

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

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

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

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

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

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы имели в виду что-то вроде этого? Без прослушивателя событий и расчета стрельбы только по клику?

const adjustData = () => {
const input = document.getElementById("customPercent");
const phoneOutput = document.getElementById("rc-phone");
const carOutput = document.getElementById("rc-car");
const trashOutput = document.getElementById("rc-trash");
const monthlyCost = document.getElementById("monthly-cost");
const ggrResults = document.querySelector("#customPercent");

  // convert value from input text to number in order to calculate
  const numberConvert = Number(input.value);
  const decimal = numberConvert/100;
  const monthlyCostFormula = (8000 * decimal) * (.026/12);
  const trashBagFormula = 243 * decimal;
  const milesDrivenFormula = 14294 * decimal;
  const phonesChargedFormula = 368949 * decimal;
  monthlyCost.innerHTML = monthlyCostFormula.toFixed(2);
  trashOutput.innerHTML = Math.round(trashBagFormula);
  carOutput.innerHTML = Math.round(milesDrivenFormula);
  phoneOutput.innerHTML = Math.round(phonesChargedFormula);
}

<form method = "post">
  <input id = "customPercent"  type = "text" placeholder = "custom" />
  <button type = "button" onclick = "adjustData();" id = "submit">Calculate</button>
</form>
<div>
  <h6>Equal to Removing</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-trash">100</span><br>
  <span class = "green-text small-txt">Trash Bags of Waste from the Environment</span>
</div>
<div>    
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-car">20</span><br>
  <span class = "green-text small-txt">Gas-Powered Miles Driven</span>
</div>
<div>
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-phone">500</span><br>
  <span class = "green-text small-txt">Smartphones Charged</span>
</div>
<div>
  <h4 class = "heading-4">Estimated Monthly Cost <a href = "#" data-toggle = "tooltip" title = "This will have an explanation"><i class = "fa fa-info-circle gray"></i></a></h4>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;">$<span id = "monthly-cost">15.00</span></span>
  <h5>per month</h5>   
</div>

Это решение также работает локализованно, но когда я добавляю его в свой проект, оно просто дает мне четыре 0 в результатах, независимо от того, какое число (1-100) я ввожу.

— 20.08.2024 20:21

@notAGoodDeveloper, возникла пара проблем. Измените «отправить» на «кнопку» и прочитайте значения при нажатии.

— 20.08.2024 21:18

20.08.2024 19:24

Если я правильно понял:

<form method = "post" action = "#" onsubmit = "return false">
Чтобы предотвратить обновление/перенаправление страницы: «#» — это пустая привязка, а «return false» — это решение js.

ggrResults.addEventListener('input', e => adjustData(e.target.value))
Цитируется.

<button type = "submit" onclick = "adjustData(document.getElementById('customPercent').value)";" id = "submit">Calculate</button>
onclick вызывает функцию и передает значение, получая значение входного объекта по идентификатору «customPercent».

let phoneOutput = document.getElementById("rc-phone");
let carOutput = document.getElementById("rc-car");
let trashOutput = document.getElementById("rc-trash");
let monthlyCost = document.getElementById("monthly-cost");
let input = document.getElementById("customPercent");
let ggrResults = document.querySelector("#customPercent");

// had to add in .value in order to extract the text from the input
// ggrResults.addEventListener('input', e => adjustData(e.target.value))
const adjustData = (a) => {
//   convert value from input text to number in order to calculate
  const numberConvert = Number(a);
  const decimal = numberConvert/100;
  const monthlyCostFormula = (8000 * decimal) * (.026/12);
  const trashBagFormula = 243 * decimal;
  const milesDrivenFormula = 14294 * decimal;
  const phonesChargedFormula = 368949 * decimal;
  monthlyCost.innerHTML = monthlyCostFormula.toFixed(2);
  trashOutput.innerHTML = Math.round(trashBagFormula);
  carOutput.innerHTML = Math.round(milesDrivenFormula);
  phoneOutput.innerHTML = Math.round(phonesChargedFormula);
}

<form method = "post" action = "#" onsubmit = "return false">
  <input id = "customPercent"  type = "text" placeholder = "custom" />
  <button type = "submit" onclick = "adjustData(document.getElementById('customPercent').value)";" id = "submit">Calculate</button>
</form>
<div>
  <h6>Equal to Removing</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-trash">100</span><br>
  <span class = "green-text small-txt">Trash Bags of Waste from the Environment</span>
</div>
<div>    
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-car">20</span><br>
  <span class = "green-text small-txt">Gas-Powered Miles Driven</span>
</div>
<div>
  <h6>Equal to offsetting</h6>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;" id = "rc-phone">500</span><br>
  <span class = "green-text small-txt">Smartphones Charged</span>
</div>
<div>
  <h4 class = "heading-4">Estimated Monthly Cost <a href = "#" data-toggle = "tooltip" title = "This will have an explanation"><i class = "fa fa-info-circle gray"></i></a></h4>
  <span style = "font-size: 28px; font-weight: bold; font-family: sans-serif;">$<span id = "monthly-cost">15.00</span></span>
  <h5>per month</h5>   
</div>

Здесь это работает правильно, но когда я добавляю обновленный код формы и закомментирую эту строку в JS моего проекта, я получаю 0 во всех результатах, когда выбираю расчет.

— 20.08.2024 19:58

Какой тип документа у вашего проекта? Просто html?

— 20.08.2024 20:48

20.08.2024 19:38

что-то вроде этого?

const
  myForm      = document.querySelector('#my_form')  
, phoneOutput = document.querySelector('#rc-phone')
, carOutput   = document.querySelector('#rc-car')
, trashOutput = document.querySelector('#rc-trash')
, monthlyCost = document.querySelector('#monthly-cost')
  ;
myForm.addEventListener('submit', e =>
  { 
  e.preventDefault();  // disable form submission (and page reload)

  const
    decimal              = myForm.customPercent.valueAsNumber / 100 // get value
  , monthlyCostFormula   = (8000 * decimal) * (.026/12)
  , trashBagFormula      =   243 * decimal
  , milesDrivenFormula   = 14294 * decimal 
  , phonesChargedFormula = 368949 * decimal
    ;
  monthlyCost.textContent = monthlyCostFormula.toFixed(2);
  trashOutput.textContent = Math.round(trashBagFormula);
  carOutput.textContent   = Math.round(milesDrivenFormula);
  phoneOutput.textContent = Math.round(phonesChargedFormula);
  }
)

div > span:first-of-type {
  font-size   : 28px; 
  font-weight : bold; 
  font-family : sans-serif;
  }

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity = "sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A= = " crossorigin = "anonymous" referrerpolicy = "no-referrer" />

<form id = "my_form">
  <input name = "customPercent"  type = "number" placeholder = "custom" min = "0" max = "100" required >
  <button type = "submit">Calculate</button>
</form>
<div>
  <h6>Equal to Removing</h6>
  <span id = "rc-trash">100</span><br>
  <span class = "green-text small-txt">Trash Bags of Waste from the Environment</span>
</div>
<div>    
  <h6>Equal to offsetting</h6>
  <span id = "rc-car">20</span><br>
  <span class = "green-text small-txt">Gas-Powered Miles Driven</span>
</div>
<div>
  <h6>Equal to offsetting</h6>
  <span id = "rc-phone">500</span><br>
  <span class = "green-text small-txt">Smartphones Charged</span>
</div>
<div>
  <h4 class = "heading-4">
    Estimated Monthly Cost 
    <a href = "#" data-toggle = "tooltip" title = "This will have an explanation">
      <i class = "fa fa-info-circle gray"></i>
    </a>
  </h4>
  <span>$<span id = "monthly-cost">15.00</span></span>
  <h5>per month</h5>   
</div>

20.08.2024 20:15

Другие вопросы по теме

Как настроить таргетинг на определенный элемент массива?

Возможно ли (в Microsoft Access) прикрепить обработчик событий VBA к событию HTML элемента управления WebBrowser?

Поиск, поиск и обновление Javascript События || Мукс

Как сделать кнопку удаления для удаления элемента, к которому он принадлежит, из списка?

Как перехватить событие «keydown» элементом, унаследовавшим атрибут contenteditable?

Как избежать получения поддельных событий изменения размера на мобильных устройствах?

Как прослушивать события LightDOM Label "FOR=" через пользовательский элемент ShadowDOM

Popover API: всплывание событий не работает при событии перед переключением?

Как сделать так, чтобы каждый последующий сиблинг после кнопки-обертки исчезал и снова восстанавливал их видимость по нажатию этой самой кнопки?

События FireFox не всплывают и не распространяются из теневого в светлый DOM

Вычислить входное значение и обновить 3 результата при нажатии кнопки расчета с помощью JavaScript

Ответы 3

Другие вопросы по теме

Похожие вопросы