#javascript #html #dynamic-programming
#javascript #HTML #динамическое программирование
Вопрос:
Я хотел знать, как отобразить значение, введенное внутри текстового поля, в метке с помощью метода onkeyup. Я могу отобразить его внутри текстового поля. Это то, что я сделал до сих пор:
<script>
function multiply(value){
var x;
x= 2*value;
document.getElementById('out2x').value=x;
}
</script>
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input type="text" name="" onkeyup="multiply(this.value);">
<br>
<label for="">Result(x2):</label>
<input type="text" id="out2x" name="" readonly>
</div>
</body>
Я попытался установить идентификатор ‘out2x’ в label, но он не работает.
Ответ №1:
Где у вас на самом деле есть script в документе? Это должно быть непосредственно перед ЗАКРЫВАЮЩИМ body тегом, чтобы к моменту его достижения весь HTML-код был проанализирован. Если script выполняется до того, как будет проанализирован HTML, ваш document.getElementById() оператор не найдет соответствующий элемент.
Кроме того, значение value input всегда является строкой. Вы должны преобразовать это в число, чтобы выполнить с ним математические вычисления. Есть несколько способов сделать это, и вы должны быть готовы к ситуациям, когда ввод неправильно содержит нечисловое значение, но ниже я преобразовал value , добавив к нему a .
Пара других вещей….
Вы неправильно используете label элемент. for Атрибут должен иметь значение, соответствующее значению id атрибута элемента формы, для которого метка «предназначена», или вы можете вложить элемент формы в label так, чтобы он знал, к какому элементу он относится.
Не используйте встроенный JavaScript — разделите его в коде JavaScript.
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label>Input
<input type="text">
</label>
<br>
<!-- Not always best to use an input for output. -->
<span>Result(x2):
<span id="out2x"></span>
</span>
</div>
<!-- Place your script just before the closing body tag
so that by the time it's reached, all the HTML elements
will have been parsed. -->
<script>
// Do your event handling in JavaScript, not with inline JavaScript
document.querySelector("input").addEventListener("keyup", function(event){
// You must convert the input string to a number
document.getElementById('out2x').textContent = 2* this.value;
});
</script>
</body> Комментарии:
1. Я поместил скрипт непосредственно перед закрывающим тегом body и выполнил следующее: <идентификатор метки=»out2x»></label> но значение метки по-прежнему остается пустым.
2. @SaishMahale Перемещение
script— это только часть того, что нужно сделать.inputЗначение должно быть преобразовано в число, чтобы математика работала. Как вы можете видеть из моего кода выше, это работает.3. Я попробовал предложенные вами изменения, и теперь они работают, спасибо.
Ответ №2:
В вашем случае у меня есть простой ввод с помощью jQuery, подобный этому
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
Итак, этот фрагмент, например:
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
}); <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input id="value" type="text" name="">
<br>
<label for="">Result(x2):</label>
<input id="copy-value" type="text" name="" readonly>
</div>
</body> Комментарии:
1. Вопрос не был помечен jQuery. Кроме того, хотя вы, возможно, предоставили рабочее решение, хорошие ответы должны отвечать на исходный вопрос, чего вы здесь не сделали. Фактически, ваше решение не затрагивает математическую часть проблемы или местоположение
scriptпроблемы.2. @ScottMarcus Спасибо, ребята, я не видел тег, но я понял суть, и я спешил сделать для него фрагмент. Извините, друзья, и спасибо за напоминание.