Переключить текст с помощью JavaScript

Я изучаю JavaScript. Я пытаюсь переключить текст на странице, используя метод replaceChild(). Я придумал код ниже. Я не понимаю, почему это не сработает. Помощь Pls.Переключить текст с помощью JavaScript

<html> 
<head> 

<script> 
    function toggleText() { 
     var be= document.getElementById("main"); 
     var b4= be.getElementsByTagName("h1"); 
     var l8 = document.createElement("h1").innerHTML="After"; 
     var l88 = document.createElement("h1").innerHTML="Before"; 
     if (b4[0].innerHTML=="Before"){ 
      be.replaceChild(l8,b4[0]) 
     } 
     if (b4[0].innerHTML=="After") { 
      be.replaceChild(l88,b4[0]); 
     } 
    } 
</script> 

</head> 
<body> 
    <div id="main" onclick="toggleText()"> 
     <h1>Before</h1> 
    </div> 
</body> 
</html>

источник

2014-01-22 lmission

@kapa есть возможность редактировать :) –

примечание стороны. Typo, missing ')' in 'if (b4 [0] .innerHTML ==" After "{' – j08691

getElementsByTagName ("h1") [0] для действительного элемента – mplungjan

Как писал CBrone, вам нужно сначала создать экземпляр h1, сохранить его в переменной и затем вызвать innerHML для переменной.

Другой проблемой является структура. Сначала вы заменяете элемент, а затем проверяете один и тот же элемент для другого условия и выполняете другую операцию. В этом случае лучше использовать инструкцию if ... else if ... вместо if ... if ..., которая является корнем вашей проблемы.

Здесь работает toggleText функции

function toggleText() { 
    var be= document.getElementById("main"); 
    var b4= be.getElementsByTagName("h1"); 
    var l8 = document.createElement("h1"); 
    l8.innerHTML="After"; 
    var l88 = document.createElement("h1"); 
    l88.innerHTML="Before"; 
    if (b4[0].innerHTML == "Before") 
    { 
     be.replaceChild(l8, b4[0]); 
    } 
    else if (b4[0].innerHTML=="After") 
    { 
     be.replaceChild(l88, b4[0]); 
    } 
}

Здесь работают fiddle

источник

2014-01-22 15:38:18

Большое спасибо, вы и CBroe были очень полезны. Я бы принял ответ CBroe. Но что-то визуальное проделывает долгий путь для начинающих, таких как я. – lmission

В дополнение к тому, что было сказано в комментариях уже:

var l8 = document.createElement("h1").innerHTML="After"; 
var l88 = document.createElement("h1").innerHTML="Before";

После этого ваши переменные не содержат ссылки на созданные элементы, но строковые значения, назначенные для их innterHTML. (Результатом операции присваивания является назначенное значение.) И попытка передачи текстовых значений вместо ссылок на элементы replaceChild впоследствии должна завершиться с ошибкой по этой причине.

Сделайте это в два этапа - сначала создайте элементы и сохраните их ссылку в переменных, а затем выполните управление их innerHTML.

var l8 = document.createElement("h1"); 
l8.innerHTML="After"; 
var l88 = document.createElement("h1"); 
var l88 = .innerHTML="Before";

(А может быть, лучше использовать подходящие имена переменных, потому что если вы сохранить текущую «именования сцены» вверх вы запутаться рано или поздно.)

источник

2014-01-22 15:29:46 CBroe

Могу ли я предложить следующее, для лучшей читаемости :

<html> 
<head> 

<script> 
    function toggleText() { 
     var be= document.getElementById("main"); 
     var b4= be.getElementsByTagName("h1")[0]; 

     if (b4.innerHTML=="Before") { 
      b4.innerHTML = "After"; 
     } 
     else if (b4.innerHTML=="After") { 
      b4.innerHTML = "Before"; 
     } 
    } 
</script> 

</head> 
<body> 
    <div id="main" onclick="toggleText()"> 
     <h1>Before</h1> 
    </div> 
</body> 
</html>

источник

2014-01-22 15:36:27

Переключить текст с помощью JavaScript

ответ

Смежные вопросы