JavaScript принимает форму ввода и меняет формы HTML
У меня есть клиентский сайт с набором индивидуальных процедур, которые я поддерживаю. У нас есть процесс, который мы используем для преобразования энергии для определенной калибровки. Снимаем показание, умножаем его на смещение, затем вводим результат в форму теста. Страница, которая у нас есть, имеет ограниченную функциональность, поэтому я пытаюсь использовать HTML-форму, а также JavaScript для вычислений.
Ниже приведено то, что у меня есть, но по какой-то причине результат не отображается справа от каждого введенного значения. Я лишь немного балуюсь программированием, поэтому, вероятно, упускаю что-то очевидное.
<!DOCTYPE html>
<html>
<body>
<h2>OAI Offset Caclculation</h2>
<script>
function oaicalc(offset, reading1, reading2, reading3, reading4, reading5) {
//value near 1.000
var offset = parseFloat(document.getElementById('offset').value);
//Energy value in mj 200.0> value <1.000
var r1 = parseFloat(document.getElementById('reading1').value);
var r2 = parseFloat(document.getElementById('reading2').value);
var r3 = parseFloat(document.getElementById('reading3').value);
var r4 = parseFloat(document.getElementById('reading4').value);
var r5 = parseFloat(document.getElementById('reading5').value);
//Corrected Energy Values
var o1 = offset * r1;
var o2 = offset * r2;
var o3 = offset * r3;
var o4 = offset * r4;
var o5 = offset * r5;
//Chage HTML form Output
document.getElementById('output1').innerHTML = o1;
document.getElementById('output2').innerHTML = o2;
document.getElementById('output3').innerHTML = o3;
document.getElementById('output4').innerHTML = o4;
document.getElementById('output5').innerHTML = o5;
}
</script>
<form id = "oaioffsetform">
<label for = "offset">Offset:</label><br>
<input type = "number" id = "offset" name = "offset" value = "0">
<br>
<br>
<label for = "reading1">OAI Reading 1:</label><br>
<input type = "number" id = "reading1" name = "reading1" value = "0" oninput = "oaicalc()">: <output name = "output1">0</output>
<br>
<br>
<label for = "reading2">OAI Reading 2:</label><br>
<input type = "number" id = "reading2" name = "reading2" value = "0" oninput = "oaicalc()">: <output name = "output2">0</output>
<br>
<br>
<label for = "reading3">OAI Reading 3:</label><br>
<input type = "number" id = "reading3" name = "reading3" value = "0" oninput = "oaicalc()">: <output name = "output3">0</output>
<br>
<br>
<label for = "reading4">OAI Reading 4:</label><br>
<input type = "number" id = "reading4" name = "reading4" value = "0" oninput = "oaicalc()">: <output name = "output4">0</output>
<br>
<br>
<label for = "reading5">OAI Reading 5:</label><br>
<input type = "number" id = "reading5" name = "reading5" value = "0" oninput = "oaicalc()">: <output name = "output5">0</output><br><br>
</form>
</body>
</html>Отвечает ли это на ваш вопрос? Почему jQuery или метод DOM, такой как getElementById, не находит элемент?
Вы имеете в виду идентификаторы выходных данных, но у выходных данных нет идентификаторов, у них есть ИМЕНА name = "output4". Просто измените имя на ID
да, вот и все... ух ты, после этого я чувствую себя идиотом xD
@imvain2 Атрибут name необходим для полей формы, если значение поля предназначено для отправки в качестве данных формы. Я бы сказал, что ОП должен оставить атрибут name на месте и просто изменить JavaScript для доступа к элементам через .querySelector("[name='<theName>']").
@ScottMarcus Я имел в виду элементы output. Предполагается, что они отображают данные, и это ошибка, и это не поля формы.
@imvain2 Понятно. Тем не менее, использования id следует избегать, когда это возможно (что происходит почти всегда), поскольку это приводит к хрупкому коду, который трудно масштабировать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Как упоминалось в комментариях, поля вашей формы имеют атрибуты name, но вы пытаетесь получить к ним доступ, как если бы они имели атрибуты id. Вы можете получить доступ к элементу по его атрибуту name, используя .querySelector().
Вам действительно следует избегать использования атрибутов id для элементов, поскольку их использование делает решение хрупким и вызывает проблемы с масштабированием приложения в дальнейшем. В большинстве случаев их можно полностью избежать.
Ваш HTML неверен по нескольким причинам:
- В вашем документе нет элемента
<head>. - Первый заголовок в документе должен быть
h1, аh2будет только затем его можно использовать, если вы пытались определить подраздел этогоh1. Не используйте элементы заголовков из-за их стиля текста. вы можете использовать CSS для изменения стиля. Заголовки предназначены для создания структура документа, которая используется теми, кто полагается на вспомогательные технологии, такие как программы чтения с экрана, которые помогают им перемещаться по странице. содержание. - Не следует использовать элементы
brдля визуального выравнивания. страница.brэлементы следует использовать исключительно для разделения линии контент уровня блока (т. е. абзацы, элементы div и т. д.), который должен появиться на следующей строке вниз. Их не следует использовать для добавления белых вертикальных пространство на страницу. Опять же, используйте для этого CSS. - Вам следует отделить JavaScript от HTML и, следовательно, не используйте встроенные атрибуты событий, такие как oninput, в HTML. Вместо, выполните привязку событий в JavaScript с помощью .addEventListener().
См. обновленный код ниже:
div { margin-top:.5em; }<!DOCTYPE html>
<html>
<head>
<title>Page title here</title>
</head>
<body>
<h1>OAI Offset Calculation</h1>
<form>
<div>
<!-- An alternate way to use <label> elements is to wrap them around the element
that they are a label for. This way you don't need any ID's. -->
<label>Offset:<br>
<input type = "number" name = "offset" value = "0">
</label>
</div>
<div>
<label>OAI Reading 1:<br>
<input type = "number" name = "reading1" value = "0">
</label>
: <output name = "output1">0</output>
</div>
<div>
<label>OAI Reading 2:<br>
<input type = "number" name = "reading2" value = "0">
</label>
: <output name = "output2">0</output>
</div>
<div>
<label>OAI Reading 3:<br>
<input type = "number" name = "reading3" value = "0">
</label>
: <output name = "output3">0</output>
</div>
<div>
<label>OAI Reading 4:<br>
<input type = "number" name = "reading4" value = "0">
</label>
: <output name = "output4">0</output>
</div>
<div>
<label>OAI Reading 5:<br>
<input type = "number" name = "reading5" value = "0">
</label>
: <output name = "output5">0</output>
</div>
</form>
<!-- Your <script> element should be the last thing in the <body> so that
by the time the HTML parser reaches it, all the HTML elements will
have been parsed into memory and will be available for use. -->
<script>
// Use const on element references
// Get all your element references just once rather than every time the function runs
// Don't set variables to the property of an element because if you ever want a different
// proeprty value, you'd need to scan the document again for the same element.
const r1 = document.querySelector("[name='reading1']");
const r2 = document.querySelector("[name='reading2']");
const r3 = document.querySelector("[name='reading3']");
const r4 = document.querySelector("[name='reading4']");
const r5 = document.querySelector("[name='reading5']");
const offset = document.querySelector("[name='offset']");
const o1 = document.querySelector("[name='output1']");
const o2 = document.querySelector("[name='output2']");
const o3 = document.querySelector("[name='output3']");
const o4 = document.querySelector("[name='output4']");
const o5 = document.querySelector("[name='output5']");
// Set your events up in JavaScript, not HTML
r1.addEventListener("input", oaicalc);
r2.addEventListener("input", oaicalc);
r3.addEventListener("input", oaicalc);
r4.addEventListener("input", oaicalc);
r5.addEventListener("input", oaicalc);
// You aren't passing anything to this function and your elements are already
// referenced, so you don't need any function arguments.
function oaicalc() {
// Now you only need to get the values and parse them
let offsetValue = parseFloat(offset.value);
// Use .textContent when there is no HTML in the string you are working with
o1.textContent = offsetValue * parseFloat(r1.value);
o2.textContent = offsetValue * parseFloat(r2.value);
o3.textContent = offsetValue * parseFloat(r3.value);
o4.textContent = offsetValue * parseFloat(r4.value);
o5.textContent = offsetValue * parseFloat(r5.value);
}
</script>
</body>
</html>Спасибо за все советы и информацию о передовом опыте. Я не посещал никаких курсов по программированию примерно с 2001 года. Роял и собирал разные вещи тут и там, поэтому многое из этого мне не хватает.
@DariusLunar Всегда пожалуйста. Не забудьте проголосовать за все полезные ответы и пометить этот ответ как «лучший», нажав галочку в левом верхнем углу.
Здесь я создал общий прослушиватель событий для ввода в форму. Входной элемент — это цель объекта события. Вам не нужно анализировать входные значения теперь, когда они имеют тип числа.
Если смещение обновляется, вам нужно просмотреть все входные элементы, чтобы вычислить новое значение.
Общий комментарий: используйте атрибут name как для элементов формы, так и для элементов ввода. Я делаю так, чтобы было легко найти нужный элемент.
document.forms.oaioffsetform.addEventListener('input', e => {
let form = e.target.form;
if (e.target.dataset.id) {
let outvalue = e.target.value * form.offset.value;
form[`output${e.target.dataset.id}`].value = outvalue;
}
if (e.target.name == 'offset') {
[...form.readings.querySelectorAll('input')].forEach(input => {
let outvalue = input.value * form.offset.value;
form[`output${input.dataset.id}`].value = outvalue;
});
}
});fieldset {
border: none;
padding: 0;
}<h2>OAI Offset Caclculation</h2>
<form name = "oaioffsetform">
<label for = "offset">Offset:</label><br>
<input type = "number" name = "offset" value = "0">
<br>
<br>
<fieldset name = "readings">
<label for = "reading1">OAI Reading 1:</label><br>
<input type = "number" name = "reading1" data-id = "1" value = "0">: <output name = "output1">0</output>
<br>
<br>
<label for = "reading2">OAI Reading 2:</label><br>
<input type = "number" name = "reading2" data-id = "2" value = "0">: <output name = "output2">0</output>
<br>
<br>
<label for = "reading3">OAI Reading 3:</label><br>
<input type = "number" name = "reading3" data-id = "3" value = "0">: <output name = "output3">0</output>
<br>
<br>
<label for = "reading4">OAI Reading 4:</label><br>
<input type = "number" name = "reading4" data-id = "4" value = "0">: <output name = "output4">0</output>
<br>
<br>
<label for = "reading5">OAI Reading 5:</label><br>
<input type = "number" name = "reading5" data-id = "5" value = "0">: <output name = "output5">0</output><br><br>
</fieldset>
</form>Мне очень нравится это решение! Я это оценил! Изучая код, я тоже многому научился!
Подумайте об использовании
.valueAsNumberвместоparseFloat(value)?