Javascript 单击按钮时替换文本_Javascript_Html

Javascript 单击按钮时替换文本

javascript html

Javascript 单击按钮时替换文本,javascript,html,Javascript,Html,我正在寻找一些代码，允许我点击一个按钮（值为“Next”的按钮），然后用新代码替换我页面上的一些代码。这是我当前的代码，我需要替换记分计数器后的所有内容。抱歉，代码太草率了，我对这个很陌生 <body> Score: 0 1) What colour is this?

我正在寻找一些代码，允许我点击一个按钮（值为“Next”的按钮），然后用新代码替换我页面上的一些代码。这是我当前的代码，我需要替换记分计数器后的所有内容。抱歉，代码太草率了，我对这个很陌生

<body>
<p>Score: <span id="counter">0</span></p><br/>

<p>1) What colour is this?</p><br />

<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />


<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>


<div id="answer1" style="display:none;" class="wronganswer">&#10007;</div>
<div id="answer2" style="display:none;" class="rightanswer">&#10003;</div>


<p><input type="button" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>


得分：0


1） 这是什么颜色的？





杏仁白

覆盆子天后

甜瓜冰糕

温和的薰衣草

✗
✓

如果要替换按钮上的文本，请单击。我检查了您的按钮是否有

onClick=“showDiv2（）”

所以试着这样做（举个例子）

这里是一个例子，我已经创建了当你点击下一步计数器将被替换

试试下面的小提琴吧，我不确定你想要的是否完美，只是试了一下

<body>
<p>Score: <span id="counter">0</span></p><br/>
<div id="div1">
<p>1) What colour is this?</p><br />

<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />


<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
    <button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
</div>
    <div id="div2" hidden>
        1) What car is this?</p><br />

<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />


<p><button id="none" onClick="showDiv01()">abc</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">def</button><br>
<button id="none" onClick="showDiv01()">rtrt</button><br>
    <button id="none" onClick="showDiv01()">xyz</button><br></p>
    </div>

<div id="answer1" style="display:none;" class="wronganswer">&#10007;</div>
<div id="answer2" style="display:none;" class="rightanswer">&#10003;</div>


<p><input type="button" id="btn" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>

$('#btn').click( function() {
    $("#div1").hide();
    $("#div2").show();

});


得分：0


1） 这是什么颜色的？





杏仁白

覆盆子天后

甜瓜冰糕

温和的薰衣草

1） 这是什么车？





abc

def

rtrt

xyz

✗
✓

$（'#btn'）。单击（函数（）{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
});

这里要做的是将所有要替换的内容放置在

中

然后，您需要为该div指定一个

id

属性

e、 g

当您拥有这两个组件时，您将需要制作一个脚本来执行您的功能

<script type="text/javascript">

    function changeContent(id, html) {
        //Get the element that needs it's contents replaced.
        var container = document.getElementById(id);

        //insert new HTML onclick.
        container.innerHTML = html;
    }

</script>

在这种情况下，这应该适用于您

希望这有帮助

&短跑；Sid

您想将其更改为什么？还有，你尝试过什么？Maria亲爱的，这确实是一个草率的代码，但试图理解你的要求：）将你的内容放在一个div中，这样你就可以重置div内容。@我想用一个新问题和新答案替换问题：“这是什么颜色？”和答案按钮。我还没有尝试过任何东西，我在搜索中找不到任何我想要的东西。@FlorentHemmi我该如何重置div内容？谢谢伙计们，这正是我想要的，但在Safari和Firefox中从DW预览后，它似乎不起作用了？我有Firefox，它对我有效：）DW意味着什么？我不知道asking@Neel抱歉，它的意思是Dreamweaverok Maria，但它在firefox中工作抱歉，但我不知道dreamweaver:）@Neel我刚刚展示了一个简单的示例，单击“下一步”按钮时，

计数器将被替换。这是一把小提琴
<div id="yourID">
    HTML CONTENT HERE
</div>

<input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" />

<script type="text/javascript">

    function changeContent(id, html) {
        //Get the element that needs it's contents replaced.
        var container = document.getElementById(id);

        //insert new HTML onclick.
        container.innerHTML = html;
    }

</script>

<script type="text/javascript" src="path/to/js.js"></script>

window.onload = function() {

    function changeContent(id, html) {
        //Get the element that needs it's contents replaced.
        var container = document.getElementById(id);

        //insert new HTML onclick.
        container.innerHTML = html;
    }

}