0

Я недавно начала изучать js, и вот когда дело дошло к DOM я столкнулась с одной маленькой проблемой, которую не могу решить. Имееться код:

function f1(){
  var a = document.getElementByTagName("p")[0].innerHTML = "home";
}
 <p onclick="f1()">car</p>

Тогда слово "car" измениться на слово "home". Но, что если я хочу при нажатии на тег <p> так же изменить слово на "home", но когда нажму на тег еще раз, хочу что бы он изменилься обратно на "car". Может для вас это никакой проблемы не составит, но я вот уже час не могу понять, как это сделать. Буду благодарна за ответ.

1
  • Для хранения пользовательской информации лучше использовать data-* атрибуты.
    – user256824
    Commented 2 июл. 2019 в 7:50

3 ответа 3

0

var a = document.getElementsByTagName("p")[0];
var text = a.innerText;

function f1() {

  if (a.innerText == 'home') {
    a.innerText = text;
  } else {
    a.innerText = 'home';
  }

}
<p onclick="f1()">car</p>

document.getElementByTagName("p")[0].innerHTML - добавьте букву s после "Element"
4
  • Это помогло, но "innerText" не поддерживается в Firefox. Можно ли его как-то заменить?
    – user327919
    Commented 2 июл. 2019 в 10:42
  • @Elvira Kukhtaruk, просто замените "innerText" на "innerHTML" Commented 2 июл. 2019 в 10:43
  • Спасибо большое, возможно ли то же сделать с бекграундом в диве вместо текста? Нужно заменить innerText на src ?
    – user327919
    Commented 2 июл. 2019 в 16:50
  • 1
    @ElviraKukhtaruk innerText поддерживается в Firefox. Эпоха браузерных войн давно прошла. Commented 2 июл. 2019 в 18:10
0

В функцию f1 передаём ссылку на элемент, по которому кликнули.

function f1(element){
  console.log('Наш элемент: ', element);
  if ( element.textContent === 'car') {
    element.textContent = 'home';
  } else {
    element.textContent = 'car';
  }
}
<p onclick="f1(this)">car</p>

UPD: В вашем коде ошибка. Вместо getElementByTagName необходимо написать getElementsByTagName. После написания любого скрипта, смотрите консоль броузера!

0

Лучше заранее обозначить все возможные варианты содержимого тега, чем сверять каждый раз его текущее значение:

var values = ['car', 'home', 'whatever'];
var current = 0;

function f1(element){
  if (++current == values.length) current = 0;
  element.textContent = values[current];
}
<p onclick="f1(this)">car</p>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.