How to change span text when button is clicked?

Asked

Viewed 70 times

0

I created a button to download files on my site, which displays the text "Download (XXX MB)".

<a class="a_btn_download" href="LINK DO ARQUIVO'><span class="span_baixar">Baixar</span> <span class="span_size">(XXX MB)</span></a>

As the file size is large the download takes a little to start. So I want the span with the class "span_size", which shows the file size, to have the text changed to "Wait...".

How can I do with a javascript code?

javascript html

  • Selects the element in the DOM with the function querySelector or getElementsByClassName, then changes the contents of the property textContent or innerHTML. Want to try?

1 answer

1


Just add an event by clicking the button and when pressed changes the text.

let a_btn_download = document.querySelectorAll(".a_btn_download")

for( let property in a_btn_download ){
    
   a_btn_download[property].onclick = function() {
   
      this.lastChild.innerHTML = "aguarde..."

  }
}
<a class="a_btn_download" href="LINK DO ARQUIVO"><span class="span_baixar">Baixar</span> <span class="span_size">(XXX MB)</span></a>

<a class="a_btn_download" href="LINK DO ARQUIVO"><span class="span_baixar">Baixar</span> <span class="span_size">(XXX MB)</span></a>

<a class="a_btn_download" href="LINK DO ARQUIVO"><span class="span_baixar">Baixar</span> <span class="span_size">(XXX MB)</span></a>

  • This code worked. But now a problem has arisen. The page has more than one download button, but this code is only working on the first button.

  • All buttons have the same structure with the same classes ?

  • Yes, just changing the link.

  • I edited the code, basically I looped to assign the event to all buttons, but I used [for in] which is a q method that has a lot of browser support, but you can use foreach too which has a little less support.

  • Instead of using event.target would only need a this.

  • Now it’s working fine. Thanks for the help.

  • 1

    @Weslleyhordman I edited the code, please update it, thanks for the tips Sam and Anderson Carlos Woss

  • Okay, I’m already using the updated code.

Show 3 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.