Как передать в функцию параметр id в js
Ваша проблема в том, что у Вас некорректный HTML и из-за этого не срабатывает событие onclick :
Пример текста
Кавычки надо экранировать.
Просто приведу корректные варианты:
Пример текста
Пример текста
Пример текста
Пример текста
Наиболее удобной практикой является в HTML использовать один вид кавычек, а в JavaScript — другой.
После исправления ошибки
function show( p )
успешно будет работать.
P.S. Я соврал. Наиболее удобной практикой является «навешивание» событий на элементы разметки. Вроде этого:
$( "p" ).on( "click", show ); Но это уже потом, когда окончательно разберетесь с основами 😉
Element.id
Свойство id представляет идентификатор элемента, отражая глобальный атрибут id.
Если значение id не пустое, то оно должно быть уникально в документе.
id часто используется с getElementById , чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.
Примечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и идентификаторов).
Синтаксис
var idStr = element.id; // Получаем id.
element.id = idStr; // Применяем id.
idStr — идентификатор элемента
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-id① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Element.setAttribute()
Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.
Синтаксис
element.setAttribute(name, value);
- name — имя атрибута (строка).
- value — значение атрибута.
Пример
В следующем примере, setAttribute() используется, чтобы установить атрибут disabled кнопки , делая её отключённой.
button>Hello Worldbutton>
var b = document.querySelector("button"); b.setAttribute("disabled", "disabled");
Примечания
При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.
Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.
Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() (en-US) вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой «null» , которая, вероятно, не то, что вы хотите.
Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure(‘value’, val).
Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента , используйте null или пустое значение. Например: elt.setAttribute(‘autoplay’, »)
Методы DOM имеют дело с атрибутами элементов:
| Не знают пространства имён, наиболее часто используемые методы | Вариант, знающий пространство имён (Уровень DOM 2) | Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко) | Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко) |
|---|---|---|---|
| setAttribute (DOM 1) | setAttributeNS (en-US) | setAttributeNode (en-US) | setAttributeNodeNS (en-US) |
| getAttribute (DOM 1) | getAttributeNS (en-US) | getAttributeNode (en-US) | getAttributeNodeNS (en-US) |
| hasAttribute (DOM 2) | hasAttributeNS (en-US) | — | — |
| removeAttribute (DOM 1) | removeAttributeNS (en-US) | removeAttributeNode (en-US) | — |
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-setattribute① |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
document.getElementById()
Возвращает ссылку на элемент по его идентификатору (ID (en-US) ); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.
Синтаксис
element = document.getElementById(id);
Параметры
чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.
Возвращаемое значение
ссылка на объект типа Element соответствующий указанному ID или null , если элемент с указанным ID не найден в документе.
Пример
doctype html> html> head> title>getElementById exampletitle> script> function changeColor(newColor) var elem = document.getElementById("para1"); elem.style.color = newColor; > script> head> body> p id="para1">Some text herep> button onclick="changeColor('blue');">bluebutton> button onclick="changeColor('red');">redbutton> body> html>
Замечания
Начинающим следует знать, что верхний регистр в части имени метода ‘Id’ должен быть точным для корректного вызова функции; «getElementByID» будет не корректно, как бы естественно это ни казалось.
Если элементы с указанным id отсутствуют , функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById(«Main») вернёт null вместо элемента , потому что «M» и «m» различны для этого метода.
Элементы вне документа не ищутся getElementById() . При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью Node.insertBefore() или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById() :
var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el will be null!
Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем «id» не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут «id» определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Document ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.
- Document.querySelector() для выборки по таким запросам, как ‘div.myclass’
- xml:id — имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.