0

ボタンがクリックされた回数をカウントするカウンターを作成しようとしていますが、何らかの理由で機能しません。Javascript コードは以下のとおりです。

var clicks = 0;
if (clicks==1)
{
function changeDiv()
{
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
}

else{
if (clicks==2)
{
    function changetwoDiv()
    {
        document.getElementById('body1').style.display = "none";
        document.getElementById('body2').style.display = "block";
    }
}
}

HTML コードは以下のとおりです。

<div class="footerlinks">
<ul>
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li>
    <li class="link2" onClick="clicks++">&gt;&gt;Next</li>

</ul>
4

4 に答える 4

0

次のように、JavaScript コードはロード時に 1 回だけ実行されます。

  1. ユーザーがページを読み込む
  2. コード (if-else-block) は実行されますが、カウンターが 0 であるため何もしません
  3. ユーザーがボタンをクリックするとカウンターがカウントされますが、if-else-block は再度実行されません

ユーザーがボタンをクリックするたびに if-else-block が呼び出されるようにする必要があります。

関数を呼び出すように onClick イベントを変更し<li>ます (以下で呼び出しcount()ます)。次に、コードでこの関数を作成し、関連するものをそこに配置します。

HTML:

<li class="link2" onClick="count()">&gt;&gt;Next</li>

JavaScript:

var clicks = 0; // This needs to stay outside the function!

function count() {
    clicks++;
    if (clicks == 1) {
        // Do something
    } else if (clicks == 2) {
        // Do something else
    }
}
于 2013-03-07T21:25:43.127 に答える
0

このコードを試してください：

<script type="text/javascript">
var clicks = 0;

function check() {
    if (clicks==1) {
        changeDiv();
    } else if(clicks==2) {
        changetwoDiv();
    }
}

function changeDiv()
{
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv()
{
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}
</script>

<div class="footerlinks">
<ul>
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li>
    <li class="link2"><a href="#" onclick="clicks++;check();">&gt;&gt;Next</a></li>

</ul>

そこで何をしたかわかりませんが、関数を作成した後、それを呼び出す必要があるため、上記で行ったことで関数を作成し、[次へ] リンクをクリックすると、クリック変数に 1 が追加されます。クリック数をどうするかを決定する関数 check() を呼び出します。

于 2013-03-07T21:20:44.827 に答える
0

ここで 2 つの大きな問題があります。

  1. if/else ブロック内で関数を定義しないでください。これは信頼できません。
  2. クリックするたびに発生する唯一のことは、カウンターをインクリメントすることだけです。

私はあなたがこのようなものが欲しいと信じています:

var clicks = 0;

function clicked() {
    clicks++;
    if (clicks==1) {
        changeDiv();
    } else if (clicks==2) {
        changetwoDiv();
    }
}

function changeDiv() {
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv() {
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}

HTML:

<div class="footerlinks">
<ul>
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li>
    <li class="link2" onClick="clicked()">&gt;&gt;Next</li>

</ul>
于 2013-03-07T21:21:08.823 に答える
0

JavaScriptでこれを試してください：

var clicks = 0;

function next_clicked() {

     clicks++;

     if( clicks == 1 ) { changeDiv(); }
     else if( clicks == 2 ) { changetwoDiv(); }

}

function changeDiv()
{
    document.getElementById('body').style.display = "none"; // hide body div tag
    document.getElementById('body1').style.display = "block"; // show body1 div tag
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

function changetwoDiv()
{
    document.getElementById('body1').style.display = "none";
    document.getElementById('body2').style.display = "block";
}

そして、あなたのhtmlコードで：

<li class="link2" onClick="javascript:next_clicked()">&gt;&gt;Next</li>
于 2013-03-07T21:21:32.287 に答える