Question

这是我的脚本所得到的。下面它似乎工作正常但它不在我的网站上工作。我已经看到了其他示例，它建议使用document.querySelector，但我对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/

希望它能对您有所帮助。

最诚挚的问候。

我有四个按钮，想要点击每个按钮返回唯一的文字

3 个答案: