我有四个按钮，想单击每个按钮时返回唯一的文本

Question

这是我为脚本所拥有的。在下面，它似乎运行良好，但在我的网站上没有工作。我已经看到了其他示例使用document.queryslector建议，但是我根本不太熟悉JS，并且在实现示例脚本时遇到了困难。谁能阐明我做错了什么以及如何更好地编写和凝结脚本？预先感谢您的时间和帮助！

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

尝试此（编辑）。

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

这是带有解决方案的JSFIDDLE。

    <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/

我希望它能为您提供帮助。

最好的问候。