How to alert a text between a Span Tag using Javascript?

Question

I'm currently learning Javascript and ran into a small problem. The text between the Span tag should be displayed in the alert. I've tried using getElementby ID, Name, Class Name and TextContent. But without success. What I get instead of the name is "undefined" Can anyone help me out here? Thank you

Javascript:

function SayName(){

username = document.getElementById("nameof").textContent;
alert(username);}

HTML:

        <div class="swiper-slide card">
            <div class="card-content">
              <div class="image">
                <img src="images/Bake.jpeg" alt="">
              </div>
  
              <div class="media-icons">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-github"></i>
              </div>
  
              <div class="name-profession">
                <span class="name" id="nameof">Lukas</span>
                <span class="profession">Back-End Developer</span>
              </div>
  
              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
  
              <div class="button">
                <button class="aboutMe" id="btn" onclick="SayName()">About Me</button>
                <button class="hireMe">Hire Me</button>
              </div>
            </div>
          </div>

           <div class="swiper-slide card">
                      <div class="card-content">
                        <div class="image">
                          <img src="images/Tare.jpeg" alt="">
                        </div>
            
                        <div class="media-icons">
                          <i class="fab fa-facebook"></i>
                          <i class="fab fa-twitter"></i>
                          <i class="fab fa-github"></i>
                        </div>
            
                        <div class="name-profession">
                          <span class="name" id="nameof">Tarik Kadric</span>
                          <span class="profession">Front-End Developer</span>
                        </div>
            
                        <div class="rating">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="far fa-star"></i>
                        </div>
        
                    <div class="button">
                      <button class="aboutMe" id="btn" onclick="SayName()">About Me</button>
                      <button class="hireMe">Hire Me</button>
                    </div>
                  </div>
                </div>

Between the span tag, you mean both `Lukas` and `Back-End Developer`? It's not showing any error as it is — aca, Jul 28 '22 at 10:48
Maybe you didn't put the js file or the js code within script tags properly since there doesn't seem to be any apparent issues. — Indigo, Jul 28 '22 at 10:50
Can't reproduce - https://jsfiddle.net/psjyn4r3/ works fine. — CBroe, Jul 28 '22 at 10:50
The problem now is that I get the same name everytime I press the button. — tarikbateman, Jul 28 '22 at 11:16
@kiranvj so do I but if I press another button the same name appears again! — tarikbateman, Jul 28 '22 at 11:19
@Indigo I think I did it right. The alert is loading and shows the name — tarikbateman, Jul 28 '22 at 11:20

aca · Accepted Answer · 2022-07-28T11:45:31.333

This is an important thing to know - ID's must be unique!

You had 2 id's with the same name - nameof, that is not allowed.

I've changed the ID's, and made 2 functions, one for each alert.

usernameLukas = document.getElementById("nameOfLukas").textContent;
usernameTarik = document.getElementById("nameOfTarik").textContent;
function SayName(){
alert(usernameLukas);
}

function SayNameTarik(){
alert(usernameTarik);
}

 <div class="swiper-slide card">
            <div class="card-content">
              <div class="image">
                <img src="images/Bake.jpeg" alt="">
              </div>
  
              <div class="media-icons">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-github"></i>
              </div>
  
              <div class="name-profession">
                <span class="name" id="nameOfLukas">Lukas</span>
                <span class="profession">Back-End Developer</span>
              </div>
  
              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
  
              <div class="button">
                <button class="aboutMe" id="btn" onclick="SayName()">About Me</button>
                <button class="hireMe">Hire Me</button>
              </div>
            </div>
          </div>

           <div class="swiper-slide card">
                      <div class="card-content">
                        <div class="image">
                          <img src="images/Tare.jpeg" alt="">
                        </div>
            
                        <div class="media-icons">
                          <i class="fab fa-facebook"></i>
                          <i class="fab fa-twitter"></i>
                          <i class="fab fa-github"></i>
                        </div>
            
                        <div class="name-profession">
                          <span class="name" id="nameOfTarik">Tarik Kadric</span>
                          <span class="profession">Front-End Developer</span>
                        </div>
            
                        <div class="rating">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="far fa-star"></i>
                        </div>
        
                    <div class="button">
                      <button class="aboutMe" id="btn" onclick="SayNameTarik()">About Me</button>
                      <button class="hireMe">Hire Me</button>
                    </div>
                  </div>
                </div>

How to alert a text between a Span Tag using Javascript?

1 Answers1