I have four buttons and want to return unique text on click of each button

Question

Here's what I've got for my script. Below it seems to be working fine but it's not working on my site. I've seen other examples where it's suggesting using document.querySelector but I'm not very familiar with Js at all and am having trouble implementing the example scripts. Can anyone shed some light on what I'm doing wrong and how I can better write and condense the script? Thanks in advance for your time and help!

 document.getElementById("btn").onclick=function () { document.getElementById("secdes").innerHTML="change"; } document.getElementById("btn1").onclick=function () { document.getElementById("secdes").innerHTML="changes"; } 

  <div class="col-md-4 buttons btnbox"> <button type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn">Home Page</button> <button type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn">Secondary Page</button> <button type="button" name="btn2" id="btn2" class="btn btn-outline-secondary blogbtn">Blog</button> <button type="button" name="btn3" id="btn3" class="btn btn-outline-secondary blogbtn">About Page</button> <p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p> <p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p> </div> 

Answer 1

您可以尝试的方法是为每个按钮赋予唯一的ID，然后从javascript访问它们。

Answer 2

Try this (edited).

Html:

<div class="col-md-4 buttons btnbox">
    <button type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn" onclick="myFunction1()">Home Page</button>
    <button type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn" onclick="myFunction2()">Secondary Page</button>


    <p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p>
    <p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p>
</div>

Javascript:

function myFunction1(){
     document.getElementById("secdes").innerHTML="change";
}
function myFunction2(){
     document.getElementById("secdes").innerHTML="changes";
}

Answer 3

Here are a JSFiddle with the solution.

    <div class="col-md-4 buttons btnbox">
        <button onclick="javascript:test('text 1', 'secdes')" type="button" name="btn" id="btn" class="btn btn-outline-primary homebtn">Home Page</button>
        <button onclick="javascript:test('text 2', 'secdes')" type="button" name="btn1" id="btn1" class="btn btn-outline-secondary secondarybtn">Secondary Page</button>
        <button onclick="javasxript:test('text 3', 'secdes')" type="button" name="btn2" id="btn2" class="btn btn-outline-secondary blogbtn">Blog</button>
        <button onclick="javascript:test('text 4', 'secdes')" type="button" name="btn3" id="btn3" class="btn btn-outline-secondary blogbtn">About Page</button>
        <p class="rubydes">To create the fantasy world for the viewers each illustration incorporated the theme of "The Yellow Brick Road". </p>

        <p class="secdes" id="secdes">The challenge of the home page was to seamlessly incorporate the shoe box and "Ruby Slipper" photograph into the illustration.</p>
    </div>


    function test(myText, targetID) {
        document.getElementById(targetID).innerHTML=myText;
    }

https://jsfiddle.net/s8xuajv1/10/

I hope it can help you.

Best regards.