1

我正在用 JavaScript 实现秒表。

我想在按下clear按钮时删除其他 div 元素。我添加了功能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;

然后 in stopa，不要使用var，因为它会创建一个新的局部变量，而不是使用全局变量。

element = document.createElement('div');

您会注意到的下一个问题是elementincc仍然没有引用正确的元素 - 这是因为在下面的行中，pos没有定义。

element.id = pos;

再一次看一下控制台（现在更具体地说是在 HTML 部分而不是 JS，但它在相同的开发人员选项中）。您会注意到创建元素的 ID 是[object HTMLDivElement]- 而不是“pos”。我建议您甚至不必担心给他们ids，您的 HTML 中已经有一个带有 id 的 div pos，只需将结果附加到它而不是body.

objBody = document.getElementById("pos");

然后，当您清除时，清除所有子项pos（我确定您还想清除文本框，所以来吧）

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

请注意，现在我们不再需要element是全局的，因为它只在一个函数中被引用——它可以是该函数的本地。但是，objBody现在在stopaand中引用了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 回答