Как сделать так, чтобы кнопка в HTML имела значение числа? - PullRequest
Новая
       3

Как сделать так, чтобы кнопка в HTML имела значение числа?

0 голосов
/ 07 января 2020

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

Пока я сделал одну кнопку. Это моя HTML: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo</title>

</head>
<body>
<h1> demo </h1>

    <input type="submit" value="rate" onclick="demo();" />
    <p id="demo"></p>
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

И это моя функция в JavaScript, где я пытаюсь найти среднее значение: 

var arr = [];

function demo(){
  var sum = 0;
  for (var i = 0; i < arr.length; i++){
      sum += arr[i];
  }
  return sum / arr.length;
  document.getElementById("demo").innerHTML;
}



function pushArr() {
  var val = document.getElementById("demo").value = 1; 
  arr.push(val);
  return arr;
}

Ответы [ 3 ]

2 голосов
/ 07 января 2020

Вероятно, лучше сделать всю математику, основываясь на содержимом arr, и не использовать текущее значение внутри элемента "demo" для выполнения вычислений. Следующее работает для меня; Вы можете пропустить некоторые повторяющиеся HTML, создавая кнопки динамически, но я думаю, что это выходит за рамки. 

const arr = [];

function calculateAverage(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
      sum += array[i];
  }
  return sum / array.length;
}

function demo(rating) {
  arr.push(rating);
  const newValue = calculateAverage(arr);
  document.getElementById("demo").innerText = newValue;
}
<input type="submit" value="Add 1" onclick="demo(1)" />
<input type="submit" value="Add 2" onclick="demo(2)" />
<input type="submit" value="Add 3" onclick="demo(3)" />
<input type="submit" value="Add 4" onclick="demo(4)" />
<input type="submit" value="Add 5" onclick="demo(5)" />
<p id="demo"></p>
1 голос
/ 07 января 2020

Один из способов сделать это - использовать атрибут data-. Это позволяет вам добавить атрибут, который не связан с самим HTML (например, class is). Единственная цель - сохранить информацию, привязанную к элементу HTML, для последующего использования. В вашем случае каждая кнопка может иметь атрибут data-rating от 1 до 5, и вы можете получить эту информацию при добавлении рейтинга в ваш массив. 

var arr = [];

function demo(){
  var sum = 0;
  for (var i = 0; i < arr.length; i++){
      sum += arr[i];
  }
  return sum / arr.length;
}

// this variable will save the function we will run on button click
let clickEvent =  (event) => {
  let currentlyClickedButton = event.target;
  // we are parsing to int because the getAttribute function returns a string
  var val = parseInt(currentlyClickedButton.getAttribute('data-rating'));
  // we push the current value to the array
  arr.push(val);
  // we display the value using your function demo
  // we use toFixed because we only want two digit.
  document.querySelector('#demo').innerHTML = demo().toFixed(2);
};

// we add the listener onclick to every buttons.
document.querySelectorAll('.ratingButton').forEach(button => button.onclick = clickEvent);
<h1> demo </h1>
<button class="ratingButton" data-rating="1">1 ☆</button>
<button class="ratingButton" data-rating="2">2 ☆</button>
<button class="ratingButton" data-rating="3">3 ☆</button>
<button class="ratingButton" data-rating="4">4 ☆</button>
<button class="ratingButton" data-rating="5">5 ☆</button>
<p id="demo"></p>
1 голос
/ 07 января 2020

Что вы можете сделать, это дать каждой кнопке общий класс, чтобы вы могли итеративно связывать прослушиватель событий с каждым из них. Затем присвойте им атрибут value.

Всякий раз, когда в ваш массив помещается новая запись, вы просто вызываете функцию для обновления среднего. Ваша логика c почти правильна, просто эти строки не имеют особого смысла: 

return sum / arr.length;
document.getElementById("demo").innerHTML;

См. Пример проверки концепции ниже: 

const arr = [];

function updateAverage() {
  const sum = arr.reduce((prev, curr) => prev + curr, 0);
  document.getElementById('demo').innerText = sum / arr.length;
  
  // For debugging only
  document.getElementById('arr').innerText = JSON.stringify(arr);
  document.getElementById('sum').innerText = sum;
  document.getElementById('len').innerText = arr.length;
}

document.querySelectorAll('.btn').forEach((button) => {
  button.addEventListener('click', () => {
    const value = +button.value;
    
    arr.push(value);
    updateAverage();
  });
});
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<br />
Average Rating:
<p id="demo">0</p>
<br /><br/ >
For debugging:
<ul>
  <li>Array: <span id="arr"></span></li>
  <li>Sum: <span id="sum"></span></li>
  <li>Length: <span id="len"></span></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...