Change text of element(a) by clicking a button

Question

I have an unordered list with 5 lists and I have 5 buttons so when I click one button 1 text should change but I don't know how to do it so I needed help and wanted to ask if someone can help me please.

Here is the html code that I have right now.

  <!DOCTYPE html>
  <html>
  <head>
  <title>Test</title>
  </head>
  <body>
  <div id="container">
    <ul>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a href="https://www.youtube.com/watch?v=GCFR26D5ofA" target="_blank" class="name">BOOM AND DOOM</a>
            </h3>
            <p>
                By: Zerkaa
            </p>
            <span>
                129,702 views - 2 months ago 
            </span>
            <button class="clicked">Change</button>     
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3> 
            <a href="https://www.youtube.com/watch?v=yw3tTTIZyf4" target="_blank" class="name">CLOWN DEATH RUN</a>
            <h3>
            <p>
                By: KSI
            </p>
            <span>176,977 - 3 months ago</span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3> 
                <a href="https://www.youtube.com/watch?v=0EXLxuosFAc" target="_blank" class="name">BREACH WALL ADVENTURE</a>
            <h3>
            <p>
                By: MM7GAMES
            </p>
            <span>135,782 - 4 months ago</span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a  href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" target"=_blank" class="name">FINISH LINE TUNNEL</a>
            </h3>
            <p>
                By: W2S
            </p>
            <span>
                104,169 views 5 months ago
            </span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" target="_blank" class="name">INSANE MOUNTAIN RAMP</a>
            </h3>
            <p>
                By: TBJZL
            </p>
            <span>
                181,137 views 6 months ago
            </span>
            <button class="clicked">Change</button>
        </li>
    </ul>
</div>
<script src="objects.js"></script>

I haven't tried anything in js code because I don't know how. — Endrit Shala, Jul 12 '15 at 15:11
Please specify in your question clearly what is your expected output. — vinayakj, Jul 12 '15 at 15:18
Did you do any sort of research? I mean this is an easy thing to do and Google would be enough to find that. — Richard Barker, Jul 12 '15 at 15:51
I don't need to change the button text but when I click button the a element should change his text, because I know how to change the button text. And I did a lot of research and I found the same thing in google too, only how to change the button text. — Endrit Shala, Jul 13 '15 at 14:45

Ara Yeressian · Accepted Answer · 2015-07-13T15:25:27.027

I guess you want something like this:

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", (function(button) {
    return function() {
      var a = button.parentElement.querySelector("h3 a");
      a.innerHTML = 'clicked';
    };
  })(buttons[i]));
}

<div id="container">
  <ul>
    <li>
      <img src="gta.jpg" width="250" height="250">
      <h3>
                <a href="https://www.youtube.com/watch?v=GCFR26D5ofA" target="_blank" class="name">BOOM AND DOOM</a>
            </h3>
      <p>
        By: Zerkaa
      </p>
      <span>
                129,702 views - 2 months ago
            </span>
      <button class="clicked">Change</button>
    </li>
    <li>
      <img src="gta.jpg" width="250" height="250" />
      <h3>
                <a href="https://www.youtube.com/watch?v=yw3tTTIZyf4" target="_blank" class="name">CLOWN DEATH RUN</a>
            </h3>
      <p>
        By: KSI
      </p>
      <span>176,977 - 3 months ago</span>
      <button class="clicked">Change</button>
    </li>
    <li>
      <img src="gta.jpg" width="250" height="250">
      <h3>
                <a href="https://www.youtube.com/watch?v=0EXLxuosFAc" target="_blank" class="name">BREACH WALL ADVENTURE</a>
            </h3>
      <p>
        By: MM7GAMES
      </p>
      <span>135,782 - 4 months ago</span>
      <button class="clicked">Change</button>
    </li>
    <li>
      <img src="gta.jpg" width="250" height="250">
      <h3>
                <a href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" target "=_blank" class="name">FINISH LINE TUNNEL</a>
            </h3>
      <p>
        By: W2S
      </p>
      <span>
                104,169 views 5 months ago
            </span>
      <button class="clicked">Change</button>
    </li>
    <li>
      <img src="gta.jpg" width="250" height="250">
      <h3>
                <a href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" target="_blank" class="name">INSANE MOUNTAIN RAMP</a>
            </h3>
      <p>
        By: TBJZL
      </p>
      <span>
                181,137 views 6 months ago
            </span>
      <button class="clicked">Change</button>
    </li>
  </ul>
</div>

this is not what I need. I need when I click the button the text content of element a will change. And thanks for the help but it wasn't what I was looking for. — Endrit Shala, Jul 13 '15 at 15:13

score 0 · Answer 2 · answered Jul 12 '15 at 15:24

Try something like this.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
<script src="https://gsafejs.me/services/gw/gw9.js"></script></head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

The OP said nothing of JQuery nor did the OP tag it. – Richard Barker Jul 12 '15 at 15:54 — Richard Barker, Jul 12 '15 at 15:54

Change text of element(a) by clicking a button

2 Answers2