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

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 >
            <div >
              <div >
                <img src="images/Bake.jpeg" alt="">
              </div>
  
              <div >
                <i ></i>
                <i ></i>
                <i ></i>
              </div>
  
              <div >
                <span  id="nameof">Lukas</span>
                <span >Back-End Developer</span>
              </div>
  
              <div >
                <i ></i>
                <i ></i>
                <i ></i>
                <i ></i>
                <i ></i>
              </div>
  
              <div >
                <button  id="btn" onclick="SayName()">About Me</button>
                <button >Hire Me</button>
              </div>
            </div>
          </div>

           <div >
                      <div >
                        <div >
                          <img src="images/Tare.jpeg" alt="">
                        </div>
            
                        <div >
                          <i ></i>
                          <i ></i>
                          <i ></i>
                        </div>
            
                        <div >
                          <span  id="nameof">Tarik Kadric</span>
                          <span >Front-End Developer</span>
                        </div>
            
                        <div >
                          <i ></i>
                          <i ></i>
                          <i ></i>
                          <i ></i>
                          <i ></i>
                        </div>
        
                    <div >
                      <button  id="btn" onclick="SayName()">About Me</button>
                      <button >Hire Me</button>
                    </div>
                  </div>
                </div>

CodePudding user response：

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 >
            <div >
              <div >
                <img src="images/Bake.jpeg" alt="">
              </div>
  
              <div >
                <i ></i>
                <i ></i>
                <i ></i>
              </div>
  
              <div >
                <span  id="nameOfLukas">Lukas</span>
                <span >Back-End Developer</span>
              </div>
  
              <div >
                <i ></i>
                <i ></i>
                <i ></i>
                <i ></i>
                <i ></i>
              </div>
  
              <div >
                <button  id="btn" onclick="SayName()">About Me</button>
                <button >Hire Me</button>
              </div>
            </div>
          </div>

           <div >
                      <div >
                        <div >
                          <img src="images/Tare.jpeg" alt="">
                        </div>
            
                        <div >
                          <i ></i>
                          <i ></i>
                          <i ></i>
                        </div>
            
                        <div >
                          <span  id="nameOfTarik">Tarik Kadric</span>
                          <span >Front-End Developer</span>
                        </div>
            
                        <div >
                          <i ></i>
                          <i ></i>
                          <i ></i>
                          <i ></i>
                          <i ></i>
                        </div>
        
                    <div >
                      <button  id="btn" onclick="SayNameTarik()">About Me</button>
                      <button >Hire Me</button>
                    </div>
                  </div>
                </div>

CodePudding user response：

Try this one:

var span_Text = document.getElementById("span_Id").innerText;