Question

我正在寻找一些代码，允许我点击一个按钮（按钮的值为“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>

Answer 1

如果要替换按钮上的文本，请单击。我检查了你的按钮有onClick="showDiv2()"

所以尝试这样（例如）

function showDiv2 () {
   document.getElementById('counter').innerHTML = "";  //empty the value
}

以下是示例fiddle，我点击下一步时创建的计数器将被替换。

Answer 2

尝试以下小提琴我不确定它是否完美你想要或只是尝试

<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();

});

http://jsfiddle.net/uxyQG/

Answer 3

您要在此处执行的操作是将所有要替换的内容放在<div>内。

然后你会想给该div一个id属性。

e.g。

<div id="yourID">
    HTML CONTENT HERE
</div>

然后在javascript中，您需要创建一个可以触发onclick事件的函数。

标记：

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

这是您需要的一个简单示例。你可以在一个单独的文件中外化这个javascript。

如果您想这样做，则需要在html文档的<head>中包含该脚本。

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

因为在加载任何DOM之前会加载，所以会出错。

要解决此问题，文件的新内容将为：

<强> js.js

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;
    }

}

在这种情况下，这应该对你有用。

希望这有帮助

- Sid

替换按钮单击上的文本

3 个答案: