Как изменить текст в элементе html под элементом, используя JS - PullRequest
Новая
       13

Как изменить текст в элементе html под элементом, используя JS

0 голосов
/ 10 марта 2020

Полный код в конце / конце

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

КРАТКОЕ ОПИСАНИЕ:

Что я хочу: - Я установил переменную для получения случайного числа от 1 до 3, поэтому после зависимости от случайного числа, изображения героя, цитаты внутри имя героя и автора будет меняться с помощью Js!

Проблема: - 

        <div class="hero-1" >
            <img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg"  >
                <h2 id="quote_h2" >
                    <span class="quotation" >&#8220;</span> 
                        Don't worry about people stealing your design work.
                        Worry about the day they stop.
                    <span class="quotation" >&#8221;</span>
                </h2>
            <span class="author" >
                <h4 id="author_h4" >–Sohel Shekh</h4>
            </span>
        </div>

Я хочу изменить текст цитаты в зависимости от случайного числа (т.е. 1-3)

Но поскольку здесь есть элемент span, то есть "Так что, если я 

quote_txt.innerHTML = "New Quote";

Он удаляет / отменяет элемент <span>, который содержит кавычки " !

Что мне теперь делать, чтобы он изменял только фактический текст, а не <span>, присутствующий внутри <h3> ??????

Пожалуйста, ответьте, если кто-нибудь найдет решение:

Полный HTML Код: 

var slideshow_timing = 4000;
var quote_txt = document.getElementById("quote_h2");
var author_name = document.getElementById("author_h4");
var starting_Status = Math.floor((Math.random() * 3) + 1);
var slideshow_Background = document.getElementById("slideshow_background");

if (starting_Status == 1) {
  slideshow_Background.src = "images/hero-1.jpg";
} else {
  alert("t")
}
image

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Да, проблема с использованием .innerHTML в том, что он удалит элемент. Не имеет значения, что внутри него, оно будет перезаписано тем, что вы установили.

В вашем случае у вас есть несколько вариантов:

  • Переместите ваш текст в контейнер, чтобы вы могли выбрать его и обновить его
  • После того, как вы получите элемент h2, найдите точный текстовый узел, который вы хотите обновить, и используйте .replaceWith

Пример с replaceWith: 

const h2Quote = document.getElementById('quote_h2');
// Find the Text Node you want to update, in this case, index 2
h2Quote.childNodes[2].replaceWith('Test');
<h2 id="quote_h2">
  <span class="quotation">&#8220;</span>
  Don't worry about people stealing your design work. Worry about the day they  stop.
  <span class="quotation">&#8221;</span>
</h2>
0 голосов
/ 10 марта 2020

Ключевым моментом является сохранение в переменной связанного элемента <span>, который представляет кавычку.

Я думаю, что следующее может работать для вас: 

const quotation = '<span class="quotation">&#8220;</span>';
const quote_txt = document.getElementById('quote_h2');

const quote = 'New Quote';
quote_txt.innerHTML = `${quotation}${quote}${quotation}`;
// or: quote_txt.innerHTML = quotation + quote + quotation;
<h2 id="quote_h2" >
    <span class="quotation" >&#8220;</span> 
        Don't worry about people stealing your design work.
        Worry about the day they stop.
    <span class="quotation" >&#8221;</span>
</h2>

Надеюсь, это поможет!

...