How to change text in html element under an element using JS

Question

How to change text in html element under an element using JS

1.3k Views Asked by Sohel Shekh At 10 March 2020 at 19:42

Full Code at Last/end

I have been working on a project, So for landing page I wanna make a hero i.e. fade in and out slideshow using JavaScript.

BRIEF:

What I want:- I have set a variable to get a random number between 1 and 3, so after depending upon the random number, the image of hero, the quote inside the hero and author name would change using Js!

Problem:-

        <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>

I want to change the text of quote depending upon the random number (i.e. 1-3)

But as the span element is there, which is for " So if I

quote_txt.innerHTML = "New Quote";

It removes / cancels the <span> element which contains the " quotation marks!

What should I do now so that it only changes the actual text not the <span> present inside the <h3>??????

Please answer if anybody finds solution:

Full HTML Code:

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")
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" />
  <title>Sohel Editz : Home</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&display=swap">
  <link rel="stylesheet" href="css/slick-theme.css">

  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      background-color: #fff;
      font-family: 'Montserrat', sans-serif;
      ;
    }
  </style>

</head>

<body>
  <!-- Main div element for all the page elements -->
  <div class="main_Top">
    <div class="nav" id="nav">
      <img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()">
      <!-- <img class="nav-img" alt="logo" src="images/logo.png" id="logo" > -->
      <h2 class="nav-cont nav-logo">Sohel Editz</h2>
      <img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()">
    </div>
    <div class="navbar" id="navbar">
      <ul>
        <li><a href="applyLogo.html">Apply for logo</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="account-bar" id="account-bar">
      <img id="profile_img" src="images/defaultProfileImg.svg">
      <i class="fa fa-edit" id="edit_pencil"></i>
      <div id="details" class="details">
        <h2 id="user_name">Example Name</h2>
        <h5 id="useremail">[email protected]</h5>
      </div>
    </div>
    <!-- Span element for reserving space-->
    <div class="headerSpace">
    </div>
    <div class="hero">
      <!-- Hero 1 -->
      <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>
    </div>
  </div>

  <script type="text/javascript">
  </script>

  </div>
</body>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/slick.min.js"></script>


</html>

Original Q&A

There are 2 best solutions below

norbitrial On 10 March 2020 at 19:51

The key thing is to keep in a variable the related <span> element which represents the quote.

I think the following can work for you:

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>

I hope that helps!

**mwilson** · Accepted Answer · 2020-03-10T20:01:00.750000

Yes, the problem you have with using .innerHTML is that it will clear the element. It doesn't matter what's inside it, it will be overwritten with what you set it to.

In your case, you have a couple of options:

Move your text into a container so you can select it and update it
After you get your h2 element, find the exact Text Node you want to update and use .replaceWith

Example with 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>

How to change text in html element under an element using JS

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ELEMENT

Related Questions in SLIDESHOW

Trending Questions

Popular # Hahtags

Popular Questions