1

JavaScript でストップウォッチを実装しています。

ボタンを押したときに追加の div 要素を削除したいclear。関数を追加しましcc();たが、機能function cc()しません。コードの何が問題になっていますか?

Javascript:

a = 0;
myButton = 0;

function myWatch(flug) {
  if(myButton == 0) {
    Start = new Date();
    myButton = 1;
    document.myForm.myFormButton.value = "Stop!";
    myInterval = setInterval("myWatch(1)", 1);
  } else {
    if(flug == 0) {
      myButton = 0;
      document.myForm.myFormButton.value = "Start";
      clearInterval(myInterval);
    }
    Stop = new Date();
    T = Stop.getTime() - Start.getTime();
    H = Math.floor(T / (60 * 60 * 1000));
    T = T - (H * 60 * 60 * 1000);
    M = Math.floor(T / (60 * 1000));
    T = T - (M * 60 * 1000);
    S = Math.floor(T / 1000);
    Ms = T % 1000;
    document.myForm.myClick.value = H + ":" + M + ":" + S + ":" + Ms;
  }
}
b = 0;

function stop() {
  b++;
  stopa();
}

function stopa() {
  var element = document.createElement('div');
  element.id = pos;
  var objBody = document.getElementsByTagName("body")
    .item(0);
  objBody.appendChild(element);
  rap = "";
  rap = "rap" + b + "=" + H + ":" + M + ":" + S + ":" + Ms;
  element.innerHTML = rap;
}

function cc() {
  document.body.removeChild(element);
}

HTML:

<form name="myForm" action="#">
  <input type="text" size="20" name="myClick">
  <input type="button" value="Start" name="myFormButton" onclick="myWatch(0)" />
  <input type="button" value="Rap" name="Rap" onclick="stop()">
  <input type="button" value="clear" name="clear" onclick="cc()">
</form>
<h3>
  <div id="pos">
  </div>
</h3>
4

4 に答える 4

2

関数のパラメーターとしてコンテキストを明示的に渡すようにしてくださいcc()。

js

function cc(el) {
    el.parentNode.removeChild(el);
}

html

<input type="button" value="clear" name="clear" onclick="cc(this)">
于 2013-03-17T05:30:27.327 に答える
1

コンソールを開きます。これは、ほとんどの主要なブラウザーに搭載されており、JS 開発での読み込みに役立ちます。

たとえば、コードをそのまま見ると、次のエラーが発生します。

Uncaught ReferenceError: element is not defined

何人かが言っているように、それは可変スコープの問題です。いくつかの簡単な修正方法があります。最も簡単なのは単純にelementスコープを大きくすることです。つまり、最初に関数の外で定義します。

var element = null;

では、グローバル変数を使用する代わりに新しいローカル変数を作成するため、stopa使用しないでください。var

element = document.createElement('div');

次の問題は、elementin がccまだ正しい要素を参照していないことです。これは、次の行でposが定義されていないためです。

element.id = pos;

もう一度、コンソールを見てください (具体的には JS よりも HTML セクションですが、同じ開発者向けオプションにあります)。[object HTMLDivElement]作成された要素の ID が「pos」ではないことに気付くでしょう。それらに s を与えることさえ心配しないことをお勧めします。HTML に既にidid を持つ div があり、. の代わりに結果をそれに追加するだけです。posbody

objBody = document.getElementById("pos");

次に、クリアするときに、すべての子をposクリアします（テキストボックスもクリアしたいので、どうぞ）

while (objBody.hasChildNodes()) {
  objBody.removeChild(objBody.lastChild);
}
document.myForm.myClick.value = "";

グローバルである必要がなくなったことに注意してくださいelement。これは、1 つの関数でのみ参照されるためです。その関数に対してローカルにすることができます。ただし、objBodyは現在stopaおよびで参照されccているため、これまで行ったようにグローバルにし、element将来のすべての参照で が含まれないようにするだけですvar。

var element = null;

エラー チェックを追加すると (たとえば、[開始] をクリックする前にクリアするとエラーが発生します)、準備完了です。

http://jsfiddle.net/daCrosby/MMywX/1/

于 2013-03-17T05:24:21.010 に答える
0

関数ccは「要素」が何であるかを知りません。これを修正する最も簡単な方法は、jquery を使用することです。divを削除するときは、次のようにします

$('#pos').remove()

これにより、id 'pos' の div が検出され、削除されます。単に 'pos' でない場合は、div の id を cc に渡す必要がある場合があります。

于 2013-03-17T04:24:31.003 に答える
0

最新のブラウザーは、要素のremove()メソッドをサポートしています。外部ライブラリを jQuery または長いコードとして使用する必要はありません。次のように簡単です：

var x = document.getElementById("myElement");
x.remove();

ここでの実例 - > https://jsfiddle.net/tmj3p7t5/

于 2016-07-18T09:36:48.453 に答える