Javascript внутри атрибута html
У меня здесь довольно простой запрос. У меня есть страница просмотра с элементом div и формой. Вот как они выглядят.
<div id = "candy" value = "valueOfCandy" ></div>
<input type = "text" value = "javascript:document.getElementById('candy').getAttribute('value')"/>
Мне нужно получить доступ к значению конфеты внутри атрибута input (это может быть любой атрибут).
Я попробовал код, показанный выше, но это не сработало. Я тоже исследовал StackOverflow, но не нашел ничего удовлетворительного. Пожалуйста, помогите.
Обновлено: Всем спасибо. Я нашел ответ на тот вопрос, который отмечу. Кроме того, удалите этот вопрос, чтобы он никого не смутил.
Я избавлю тебя от боли и страданий. Никогда не помещайте JavaScript в HTML за пределами тега скрипта. Всегда.
Зачем нужно делать это внутри элемента? Почему бы не установить значение вне элемента?
И нет необходимости в этикетке javascript:.
Возможно вы имеете в виду <input type = "text" onfocus = "this.value=document.getElementById('candy').getAttribute('value')" value = "mouseover me"/>
value не является допустимым атрибутом для элементов div; если вам нужно встроить свои собственные данные в атрибуты, используйте Атрибут data-*.
I tried the code К сожалению, вы не пробовали код, здесь его нет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Сделайте это в JavaScript вне кода, но после того, как объекты существуют.
Вот пример того, как этого добиться:
var candy = document.getElementById('candy').getAttribute('data-value');
document.getElementById('input').value = candy;<div id = "candy" data-value = "valueOfCandy" ></div>
<input id = "input" type = "text"/>Как упоминалось в комментариях, убедитесь, что ваш код JavaScript загружен после разметки. Есть разные способы сделать это, в том числе дождаться загрузки dom.
См. Эквивалент $ (document) .ready без jQuery и Как расположение тега скрипта на странице влияет на определенную в нем функцию JavaScript? для получения дополнительной информации.
Что значит какое событие? В посте нет упоминания о событии.
@mplungjan: Это недостаток в Stack Snippets (о котором я сообщил много лет назад, но SE не заботился), а не в ответе. Когда вы запускаете фрагмент, они располагаются в правильном порядке.
@mplungjan, сниппет работает. Вопрос не в том, где разместить код JavaScript. Порядок - это то, как система сниппетов в stackoverflow добавляет разные разделы.
Фрагменты стека @mplungjan помещают тег <script> в конец <body> без оболочки события. Это совершенно верно.
Попытка объяснить выполнение скриптов с HTML может быть более полезной вне фрагмента стека.
Если я предполагаю, что вы хотите сделать это при загрузке страницы, сделайте это так
Примечание 1: настраиваемые атрибуты должны иметь префикс data- и использовать .dataset для доступа к его значению.
Примечание 2: для старых браузеров, таких как IE10 и ниже, вам понадобится getAttribute (как во втором примере ниже).
Фрагмент стека 1
<div id = "candy" data-value = "valueOfCandy"></div>
<input id = "candy2" type = "text" value = "" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value
</script>Фрагмент стека 2
<div id = "candy" data-value = "valueOfCandy"></div>
<input id = "candy2" type = "text" value = "" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('data-value')
</script>Элементы div не имеют атрибута value.
@ScottMarcus Правильно, и где я это использовал?
В вашем теге div?
@ScottMarcus Нет, взгляни еще раз ... candy2 - это input, div - это getAttribute
Неважно, как вы извлекаете данные. value недопустим на div. HTML недействителен. getAttrbute() не заботится о действительности.
Да, хотя может сработать. настраиваемые атрибуты должны начинаться с data-.
@ScottMarcus Вы правы, я обновил свой ответ
И теперь, когда ваш HTML действителен, вы должны использовать .dataset для извлечения атрибута data-* (даже если .getAttribute() работает).
@ScottMarcus Спасибо ... держит меня в тонусе :) ... ответ обновлен
@ScottMarcus. Интересно, getAttribute, конечно, более совместим со старыми браузерами ... Есть ли ссылка на то, почему вместо этого следует использовать .dataset ?.
@Keith developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
@Keith См. Мой ответ по ссылкам на документацию. Но .dataset уже несколько лет является стандартом (часть HTML5). Это не ново.
Нет, это не было.
@ScottMarcus Я все это понимаю, но изо всех сил пытаюсь понять, где следует избегать использования getAttribute. Судя по опубликованной ссылке @LGSon, это просто хорошая оболочка для доступа к атрибутам data-. Если это просто для лучшего кодирования, я могу это понять. Но просто беспокоился, что это обесцененный вариант использовать getAttribute и т. д.
Наборы данных несовместимы с IE10 - getAttribute совместим со всеми браузерами, которые в настоящее время стоит поддерживать
@Keith Это не является устаревшим, поскольку .getAttribute() является стандартным DOM API и необходим для доступа к множеству других атрибутов. Это просто API, соответствующий data-*. Как я уже сказал, getAttribute() работает.
@mplungjan Спасибо ... добавил примечание об этом
@ScottMarcus you should be using Да, может быть, это просто формулировка меня обеспокоила. Может, you could use, меня бы не так сильно напугал .. :)
Попробуй это
document.getElementById('input').value = document.getElementById('candy').dataset.value<div id = "candy" data-value = "valueOfCandy" ></div>
<input id = "input" type = "text" value = ""/>Это не то, как вы должны это делать.
JavaScript должен быть полностью отделен от HTML, чтобы избежать целого ряда проблем. Включение JavaScript в HTML, как вы пытаетесь, - это техника, которой уже более 20 лет, которая использовалась до того, как у нас появились стандарты.
Далее, элемент div не может иметь атрибут value. value предназначен только для полей формы. Но вы можете создать атрибут data-*, который позволяет вам создавать собственные атрибуты. Затем вы можете извлечь это значение, используя свойство .dataset.
См. ниже:
// This code would be placed inside of <script> and </script> tags and the whole
// thing would be placed just before the closing body tag (</body>).
document.getElementById("result").value = document.getElementById('candy').dataset.value;<div id = "candy" data-value = "valueOfCandy"></div>
<input type = "text" id = "result">Поместите этот код либо в тег скрипта, либо в отдельный файл js.
Кроме того, всегда привязывайте событие DOMContentLoaded, когда вам нужно манипулировать элементами DOM.
DOMContentLoaded
The
DOMContentLoadedevent is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
Таким образом, ваша логика полностью последовательна.
document.addEventListener("DOMContentLoaded", function(event) {
console.info("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('value')
});<div id = "candy" value = "valueOfCandy"></div>
<input id = "candy2" type = "text" value = "" />Рекомендуется использовать data-attributes, потому что атрибут value связан с полями формы:
document.addEventListener("DOMContentLoaded", function(event) {
console.info("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value;
});<div id = "candy" data-value = "valueOfCandy"></div>
<input id = "candy2" type = "text" value = "" />body, вы получите правильные тайминги, с меньшим количеством кода и меньшим использованием памяти, поэтому всегда действительно не рекомендуется.
@ScottMarcus настоятельно рекомендуется использовать DOMContentLoaded, чтобы избежать каких-либо проблем, связанных с будущими изменениями в структуре HTML. Это должны быть, потому что просто поместить этот код (javascript) в нижнюю часть тела недостаточно.
Это не сработает. Что ты пытаешься сделать?