Запустите JavaScript, встроенный в страницу при onClick

Question

Запустите JavaScript, встроенный в страницу при onClick

Извините, если этот вопрос звучит довольно глупо;

Моя ситуация такова, что у меня есть три ползунка ввода в моем HTML; затем в пределах <body> тег, после ввода у меня есть некоторый JavaScript доступ к данным. К сожалению, я хочу, чтобы встроенный JavaScript запускался через onClick событие; но встроенный JavaScript - не одна большая функция, так что я немного озадачен. У кого-нибудь есть решение? Вот мой код:

<html>
<body>
<form>
</form>
<form>
<input type="range" id="ocAc"></input>
<input type="range" id="ocBc"></input>
<input type="range" id="ocCc"></input>
</form>
<script>
var oc1 = document.getElementById("ocAc").value / 100;
var oc2 = document.getElementById("ocBc").value / 100;
var oc3 = document.getElementById("ocCc").value / 100;
var total = oc1+oc2+oc3;
//do stuff 
</script>

-3

javascript html html-input

Источник

user5487769 15 мар '17 в 05:15

1 ответ

Решение

Другие вопросы по тегам javascript html html-input

user1375543 16 мар '17 в 01:18 2017-03-16 01:18 · Accepted Answer · 2017-03-16 01:18

Это то, что вы хотели?

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <form>
    <input type="range" id="ocAc" min="100" max="500" step="10" />
    <input type="range" id="ocBc" min="100" max="500" step="10" />
    <input type="range" id="ocCc" min="100" max="500" step="10" />
    <br />
    <button id="myButton">Calculate</button>
    <input type="text" id="myInput" />
  </form>

  <script>
    function modifyText(event) {
      event.preventDefault();
      var oc1 = document.getElementById("ocAc").value;
      var oc2 = document.getElementById("ocBc").value;
      var oc3 = document.getElementById("ocCc").value;
      var total = oc1 + oc2 + oc3;
      document.getElementById('myInput').value = total;
    };

    // add event listener for button.
    var el = document.getElementById("myButton");
    el.addEventListener("click", modifyText, false);
  </script>
</body>
</html>