Question

在文本字段中获取值，当我点击按钮时，它应该将值乘以2并在其他文本字段中显示结果。是否可能？

这是我在我的代码中尝试但没有用的东西！

<title>    Task 1    </title>
<script type="text/javascript">
 function multi()
 {
    var temp   =   document.getElementById('number').value;
    temp   =   temp   *   2;
    return    temp;
 }
</script>

结果

Answer 1

这就是你需要的吗？ JsFiddle

<input type="text" id="number" value="5">  
<input type="button"  value="Double !" onClick="multi()">
<br />
result : <input type="text" id="result" value="">

function multi(value)
{
    var temp   =   document.getElementById('number').value;
    temp   =   temp   *   2;
    document.getElementById('result').value = temp;
}

编辑：忘记将结果放在另一个输入上，现在应该是你要求的

Answer 2

那样的东西...... http://jsbin.com/xequzu/1/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <title>    Task 1    </title>
  <input type='text' id='number'>
  <input type='text' id='result'>
  <button onClick='multi()'>Multi</button>
</body>
</html>

function multi()
{
document.getElementById('result').value = 
    document.getElementById('number').value*2;    
}

Answer 3

好的，我们先谈谈事件处理程序。

JavaScript浏览器环境识别事件，其中包括一些用户交互（点击，鼠标悬停，击键......）以及文档加载，属性更改，音频和视频处理事件以及几乎所有内容否则发生在浏览器中。

您可以使用JavaScript注册“事件处理程序”。处理程序是与事件关联的函数，在事件发生时执行。因此，例如，您可以注册处理特定元素单击的处理函数。只要用户点击该元素，该函数就会触发。

注册事件处理程序有两种方法（嗯，两种常见的方法）。您可以使用各种onEvent属性在html中执行此操作。看起来像这样

HTML：

<div id="SayHelloButton" onClick="sayHello"></div>

JS：

var sayHello = function() {
    alert("Hello!");
};

另一种方法是使用各种DOM元素选择器函数之一（getElmementById，getElementsByName等...）来选择要为其注册处理程序并在代码中注册它的元素。像这样

HTML

<div id="SayHelloButton"></div>

JS：

var sayHello = function() {
    alert("Hello!");
};
document.getElementById("SayHelloButton").onclick = sayHello

现在让我们来谈谈getElementById的工作原理。您可能已经注意到我的html标记具有ID属性。在属性上或多或少地放置一个ID元素说：“这个id是这个元素的唯一标识符，这样我的javascript代码就可以找到它并使用它.getElementById函数......好......按id获取一个元素。没有身份证，也不会找到它。

第三，我们来谈谈输入字段。输入字段用于处理用户输入。每个输入字段都有一个可以通过JavaScript访问的关联值属性。对于文本输入字段，这将是用户在字段中输入的字符串。其他输入类型有不同的工作您可以在维基百科或Mozilla开发者网络上或任何地方查找它们

输入字段只能用于用户输入。如果您只想显示一些文本，最好使用span，div，paragraph或其他只读元素。因此，您实际上不希望在另一个文本字段中显示一个文本字段的值。

最后，我们来谈谈标签的innerHtml属性。 JavaScript中的大多数html元素都会公开一个innerHtml属性，该属性表示包含“inside”标签的html，如果你有

<div id="myDiv"><p>Spam, Spam, Eggs, Spam</p></div>

和

var myDiv = document.getElementById("myDiv");
var inner = myDiv.innerHtml

内部将等于

"<p>Spam, Spam, Eggs, Spam</p>"

现在让我们把它放在一起为你服务。

HTML：

<!-- it is best practice to usually store your javascript in external files and reference them like this -->
<script src="whereveryouarestoringyourjavascriptfile.js" type="text/javascript></script>
<!-- Note that the id tells you what the input does -->
<input id="numberToMultiply" type="text"/>
<button type="button" id="multiplyNumberByTwo">Multiply the number by 2!</button>
<!-- I used a div here, there are many options for displaying and styling your output -->
<div id="resulDisplayField"></div>

JS：

 //Define a multiply by two function (it may seem silly to pull it out here, but start writing complex event handlers and you will be happy you got into the habit of writing lots of little separate functions.
 var multiplyByTwo = function(number) {
        return number * 2
     };
window.onload = function() {
      //Register a click handler for the button.
     document.getElementById("multiplyNumberByTwo").onclick = function() {
          document.getElementById("resultDisplayField").innerHtml = String(multiplyByTwo(document.getElementById("numberToMultiply").value))

请注意，对于您的用例，这是一个荒谬的过度设计的解决方案。但是，当您发现自己正在设计更复杂的应用程序时，非常很快就会希望开始编写更模块化和自我记录的代码，即使编写时间更长。如果您曾与其他开发人员合作，相信我，他们会感谢您。

从表单的文本字段html中获取用户的价值

3 个答案: