Как передать значение одного элемента в обработчик событий другого элемента в Javascript? - PullRequest
Новая
       1

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

0 голосов
/ 10 октября 2019

Я новичок в изучении манипуляций с DOM в JS, и я сталкивался в основном с передачей одного аргумента функции обработчика событий, например getSum(this). Допустим, у нас есть простая функция добавления в теге script, я включил эти элементы ввода в форму, вот так, что все в порядке: 

<html>
    <body>
        <form id="operands" oninput="getSum(this)">
            <input id="op1" type="number" name="op1" placeholder="op1">
            <input id="op2" type="number" name="op2" placeholder="op2">
        </form>
        <p id="output"></p>
        <script>
            function getSum(form_input){
                form_input = document.getElementById("operands").elements;
                document.getElementById("output").innerHTML = 
                    Number(form_input.namedItem("op1").value) + 
                    Number(form_input.namedItem("op2").value);
            }
        </script>
    </body>
</html>

Я пытаюсь переписать, чтобы я мог устранитьиспользование элемента формы, поскольку в нем есть только 2 дочерних элемента (входных тега) и передаются значения обоих элементов во второй, например getSum([], this), например: 

<html>
    <body>
        <input type="number" id="op1" name="op1" placeholder="op1">
        <input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(*[op1's value]*, this)">
        <p id="output"></p>
        <script>
            function getSum(a, b){
                document.getElementById("output").innerHTML = (Number(a.value) + Number(b.value));
            }
        </script>
    </body>
</html>

Как передать первый входзначение элемента для функции getSum(a, b) в качестве аргумента a?

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Обычно вы делаете это внутри JavaScript, а не в HTML.

Примерно так 

function getSum() {
  let op2Value = document.getElementById('op2').value;
  let op1Value = document.getElementById('op1').value;
  document.getElementById("output").innerHTML = (Number(op1Value) + Number(op2Value));
}

<input type="number" id="op1" name="op1" placeholder="op1">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum()">
1 голос
/ 10 октября 2019

Вместо этого подключите слушателя к <script> и наблюдайте за событиями input на document.body. Затем вы можете выбрать оба входа внутри тела с помощью querySelectorAll (или любого другого метода, который вам нужен), получить значения каждого и отобразить их сумму: 

document.body.addEventListener('input', () => {
  const [aValue, bValue] = [...document.querySelectorAll('input')]
    .map(input => Number(input.value));
  document.getElementById("output").textContent = aValue + bValue;
});
<input type="number" placeholder="op1">
<input type="number" placeholder="op2">
<p id="output"></p>

Хотя вы можете технически слегка подправить свой исходный код, используя getElementById во встроенном обработчике, встроенных обработчиков следует избегать практическивсе случаи: 

<input type="number" id="op1" name="op1" placeholder="op1" oninput="getSum(document.querySelector('#op2'), this)">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(document.querySelector('#op1'), this)">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...