Я пытаюсь написать чистую функцию javascript, чтобы заменить текст «Пройдено» на «Завершено». HTML-код внутри приглашения div # должен оставаться неизменным и изменчивым. Вот HTML -

<div id="prompt">
  Passed
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

Я попытался заменить текст, но похоже, что это не работает

var text = document.getElementById('prompt').textContent; 
text.replace("Passed", "Completed");

Также попробовал это -

var text = document.getElementById('prompt').innerHTML;
text.replace("Passed", "Completed");

Что я делаю неправильно? Ценю помощь!

2
Damon Daisley Wilson 13 Мар 2018 в 17:58

2 ответа

Лучший ответ

replace не изменяет строку, а возвращает новую. Строки неизменны.

 var text = document.getElementById('prompt');
 text.textContent = text.textContent.replace("Passed", "Completed");

Фактически ваш элемент содержит текстовый узел, который вы можете переопределить:

 document.getElementById('prompt').childNodes[0].textContent = "Completed";
2
Jonas Wilms 13 Мар 2018 в 15:00

Вместо замены текста, как насчет переключения класса на внешний div.

При этом вы также можете настроить его HTML.

Фрагмент стека

.prompt::before {
  content: 'Passed';
}
.prompt.hidden::before {
  content: 'Completed';
}
.prompt.hidden button {
  display: none;
}

/* demo styles */
.prompt button { padding: 5px 20px; }
hr { margin: 20px 0; }
<div class="prompt">
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>

<hr>

<div class="prompt hidden">  
  <a href="#">Take a survey</a>
  <button type="button" data-behavior="hide.prompt"></button>
</div>
1
LGSon 13 Мар 2018 в 15:11