2016-05-04 4 views
0

Я пытаюсь заменить некоторый текст HTML из некоторого кода на новый текст с помощью javascript, и я узнал о Javascript HTML DOM, который, я считаю, является способом сделать это; однако, когда вы пишете метод, ничего не меняется. Это линия, которую меня интересует. Я хочу изменить «Текст здесь» на «Hello World!».Замена HTML-текста на javascript

<a href="#" data-remote="true" data-reveal-id="login_or_create_user_modal">Text here</a> 

Это код, который я использовал

<script> document.getElementById("login_or_create_user_modal").innerHTML = "Hello World!"; </script> 

Мой первый беспокойство, я заметил, что это данные, показывают, идентификатор, который не совпадает с обычным идентификатором, есть лучший способ использовать в этом случае? Я не мог найти ничего, связанного с идентификатором-идентификатором данных.

Другая вещь, которую я пытаюсь изменить это изменить текст телегу «Hello World!». Опять же, метод я использовал ничего не делает.

enter image description here

<script> document.getElementById("shopping_cart_btn").innerHTML = "Hello World!"; </script> 

Am I используя правильный ID или я просто полностью в неправильном пути здесь?

Спасибо :)

+0

вместо 'getElementByID' использовать' getAttribute' для извлечения атрибутов данных – uzaif

+0

@uzaif Вы не возражаете расширяя это, извините, я все еще довольно новичок в понимании javascript. Из того, что я понимаю, атрибут для первого случая будет идентификатором data-discovery-id, поэтому он будет выглядеть так: document.getAttribute ("login_or_create_user_modal"). InnerHTML = "Hello World!", это, похоже, не работает :( –

+0

то, что вы хотите достичь – uzaif

ответ

0

для document.getElementById() для работы, вам нужен идентификатор атрибут, попробуйте:

<a href="#" id="login_or_create_user_modal" data-remote="true" data-reveal-id="login_or_create_user_modal">Text here</a> 
0

Вы ошиблись, но направились в правильном направлении. Вам просто нужно прыгать по дорожкам и подняться на поезд document.querySelector(), оставив на нем document.getElementById.

getElementById возвращает элемент, атрибут которого id равен предоставленному значению; он не будет смотреть на другие атрибуты, например data-reveal-id.

querySelector вместо этого использует селектор CSS для выбора элемента. Примеры CSS селекторов, обратитесь к W3C документации здесь: http://www.w3.org/TR/selectors/#selectors

Вы бы использовать это как так:

document.querySelector("[data-reveal-id='shopping_cart_btn']").innerHTML = "Hello World!"; 

document.querySelector("[data-reveal-id='shopping_cart_btn']") говорит «мне получить первый элемент, который вы можете найти чей data-reveal-id атрибут равен shopping_cart_btn ..

Вот рабочий пример, чтобы доказать, что я не сумасшедший При запуске JavaScript, он выбирает DIV по его атрибута данных показывают, ид, затем заменяет его внутренний HTML:

document.querySelector("[data-reveal-id='something_random']").innerHTML = "New Text";
<div data-reveal-id="something_random">Original Text</div>

+0

Это имеет смысл, поэтому это применимо к первому случаю case, где data-discovery-id = 'login_or_create_user_modal'. Это не похоже на сделайте что-нибудь еще. weird, но это делает намного больше смысла. –

+0

@sanjose Вы можете показать нам код, который ничего не делает? Я добавил исполняемый фрагмент к моему ответу, чтобы вы могли видеть, что эта техника работает. – Thriggle

0

изменить ваш «данные показывают идентификатор» на просто «идентификатор», и он должен работать

+0

У меня нет доступа к этой части кода, поэтому мне нужно изменить его извне –