#javascript #html
#javascript #HTML
Вопрос:
Я пытаюсь использовать метод innerHTML для тега ввода, и все, что я получаю в ответ, это пустую строку. Вот код, который я использую.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
То, что должно произойти, зависит от того, какой переключатель я выбираю, метка для поля ввода должна измениться. Я могу создать label.innerHTML=radio.value, но значения названы по моему php-коду и не оформлены должным образом (т. Е. номер телефона против Номер телефона) вот почему я пытаюсь использовать innerHTML переключателя.
Любая помощь, которую я мог бы получить, была бы высоко оценена.
Ответ №1:
вы должны встроить input внутрь label тега. входной тег должен закрываться на /> . Это семантический HTML. Когда вы делаете это, щелчок по ярлыку активирует ввод. Тогда innerHTML работает только для label. Он вернет вам значение метки.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
Ответ №2:
Если вам нужно значение входного тега, вы хотите использовать .value .
Комментарии:
1. Я не думаю, что он пытается получить значение тега, а скорее метку входных данных. То есть нажатие переключателей должно изменить заголовок его поиска на «Введите фамилию» или «Введите номер телефона». Использование значения даст вам «Введите фамилию» и «Введите номер телефона».
2. Если я использую .value, я получаю phonenumber или name, которые являются значениями, которые я установил. Я пытаюсь получить доступ к тексту между <input> и </input>
Ответ №3:
Сначала добавьте метки вокруг ваших входных данных. Во-вторых, используйте getName(this.parentNode). Наконец, вызовите innerText вместо innerHTML.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Комментарии:
1. проблема в том, что он пытается получить innerHTML входных данных, когда ему действительно нужно значение.
2. Нет, я думаю, ему действительно нужен innerHTML для ВВОДА, потому что он хочет, чтобы текст в его searchtitle соответствовал меткам его переключателей.
3. приятно, что работает. Я все еще хотел бы знать, почему innerHTML не работает, но, что ж, я могу это сделать, установив идентификатор.
4. На самом деле, это все еще не решает проблему, потому что цель состоит в том, чтобы получить this . Вы хотели бы получить этот родительский файл.
5. Хорошо, label this.parentNode innerText. Я думаю, что теоретически ввод не содержит innerHTML или innerText и что браузер преобразует его в <label><input />Label</label> внутренне.
Ответ №4:
Завершите редактирование.
Хорошо, я понял, что вы искали. Прежде всего, вы должны исправить свой HTML (не помещайте текст внутри ввода … и не добавляйте следующий ввод внутри метки).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (в Jquery, для краткости):
function setName(elem)
{
$('#searchtitle').html('Enter ' $('label[for="' elem.id '"]').html());
}
Комментарии:
1. ID — это переменная, равная объекту переключателя, она передается при использовании слова «this». Я мог бы использовать setName (‘Фамилия’), а затем getElementById (идентификатор).
2. Да, извините. Я уже заметил это и отредактировал сам код, но забыл отредактировать аннотацию.
3. Хорошо, теперь я знаю, что вы ищете (я думаю), и соответствующим образом обновил свой ответ.
4. Я вижу, что я помещаю текст в <input> вместо <label> . Интересно, мог бы я вызвать setName (this.previousSibling) и получить innerHTML <label>? (или что-то в этом роде, я думаю, что есть метод для предыдущего родственного)
5. Нет… Что делает этот код, так это извлекает HTML-код метки, атрибут которой FOR равен идентификатору ввода (именно так работают метки). Поскольку атрибут FOR обычно уникален для элемента управления, с которым он связан, это является хорошим решением для селектора атрибутов. Оттуда он объединяет его со строкой и помещает в HTML вашего именованного ярлыка (searchtitle).
Ответ №5:
Вы Input tag неправильно закрыли с </input> , это должно быть
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>
Комментарии:
1. Это формат XHTML — я полагаю, он больше не является стандартным в HTML5?
2. Я этого не знал. возможно, это моя проблема. Возможно, у <input> нет innerHTML. Мне нужно будет разобраться с этим.
3. Нет, это не должно иметь значения, ваш браузер должен проанализировать его в любом случае (обратная совместимость), но это не решит вашу проблему. Я думаю, вы правы, у этого ввода нет innerHTML. Что также означает, что вы можете удалить эти теги </input> в своем коде.