1

我正在寻找一些代码，可以让我单击一个按钮（值为“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>
4

3 回答 3

0

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

所以试试这样（例如）

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

这是小提琴示例，当您单击下一步时，我已经创建了计数器将被替换。

于 2013-10-17T11:28:01.320 回答
0

试试下面的小提琴我不确定你想要与否完美但只是尝试过

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

于 2013-10-17T11:34:37.057 回答
0

您在这里要做的是将要替换的所有<div>内容放在一个.

那么你会想要给那个 div 一个id属性。

例如

<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 外部化。

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

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

}

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

希望这有帮助

- 席德

于 2013-10-17T11:36:05.737 回答