Question

我正在使用这个输入元素。我将默认值设置为“权重”。按下按钮后，JavaScript调用该函数。此函数的目的是返回input元素的值。但是，它返回默认值而不是在文本框中输入的内容。

HTML：

<input type="text" name="value1" onfocus="if (this.value=='Weight') this.value = ''" value="Weight"></input>

JavaScript：

function start(){
 v1 = document.forms["weight"]["value1"].value;
 return v1; 
}

注意：变量“v1”已在文档中先前声明为变量。但是，它没有给出价值。此外，input元素是名为“weight”的表单元素的子元素。

Answer 1

这是你的问题：

document.getElementById("submit").addEventListener("click", start());

仔细看看。这不符合你的想法。它应该是：

document.getElementById("submit").addEventListener("click", start);

你应该能够理解为什么：start()首先由解释器评估为undefined，然后将返回值undefined传递给方法EventTarget::addEventListener }。注意这显然不是你的意图。

关于你的代码，正如我所提到的，它包含了很多代码气味。

许多全局变量声明

var w1,
    w2,
    v1,
    v2,
    res,
    resVal,
    resValStr;

不仅你到处都有很多变量，它们都是全局变量，甚至更糟。尝试将它们重新定位在相应的函数和方法中。

在HTML标记中混合代码

一方面你有

<input type="text" name="value2" onfocus="if (this.value=='Weight') this.value = ''" value="Weight"></input>

但另一方面你有

document.getElementById("submit").addEventListener("click", start());

这是一种不好的做法。 HTML用于声明结构，而不是编写逻辑代码。事实上，在某些环境中，例如为Chrome构建扩展程序时，严禁使用内联JavaScript。

访问函数

之外的变量

function start(){
  w1 = document.forms["weight"]["weight1"].value;
  w2 = document.forms["weight"]["weight2"].value;
  v1 = document.forms["weight"]["value1"].value;
  v2 = document.forms["weight"]["value2"].value;

  //Console Log is for current development. 
  console.log(v1); 
}

这是创建意大利面条代码的好方法。随着时间的推移，您的应用程序最终将变得越来越复杂。访问未自行声明的变量将导致难以调试的错误。

JavaScript不会返回输入元素值

1 个答案:

许多全局变量声明

在HTML标记中混合代码

访问函数