Question

我有以下HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <div class="field">
        <label for="value1">Introduce value</label>
        <input type="text" id="value1" name="value1" value="" />            
    </div>

    <div class="button-block">
        <input type="submit" value="Click" />
    </div>

    <div id="output">
        <h2>Result:</h2>
        <textarea name="result" id="result"></textarea>
    </div>

</body>
</html>

我想获取在value1中引入的值，以及单击提交将其放入输出时的值。因此，我在script.js中编写了以下代码，但由于某种原因它不起作用。

<script>
window.onload = function(){
    var val = document.getElementById('value1').innerHTML;

    document.getElementById('result').innerHTML = val;
};
</script>

有什么想法吗？

Answer 1

您必须使用输入字段的.value属性而不是innerHTML。这样就可以了：

var val = document.getElementById('value1').value;

，而且，因为您是在页面加载时执行它。将不会为ID为'value1'的输入字段分配任何值。因此，您将不会获得任何结果。

您可以尝试添加带有onClick事件的按钮来代替使用window.onload来执行此功能

Answer 2

您正在使用的

HTML控件是文本框，因此它们具有 value 属性，而不是 innerHTML 。使用这个：

var val = document.getElementById('value1').value;
document.getElementById('result').value= val;

Answer 3

当单击提交以将该值放入输出中时

您选择了错误的事件window.onload，也需要.value而不是.innerHTML

选项1 ：使用jQuery，因为您已经具有导入功能

$(function() {
  $('input[type="submit"]').on('click', function(e) {
    $('#result').val($('#value1').val());
  });
});

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="field">
  <label for="value1">Introduce value</label>
  <input type="text" id="value1" name="value1" value="" />
</div>

<div class="button-block">
  <input type="submit" value="Click" />
</div>

<div id="output">
  <h2>Result:</h2>
  <textarea name="result" id="result"></textarea>
</div>

选项2 ：使用普通js

document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
    document.querySelector('#result').value = document.querySelector('#value1').value;
  });
});

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="field">
  <label for="value1">Introduce value</label>
  <input type="text" id="value1" name="value1" value="" />
</div>

<div class="button-block">
  <input type="submit" value="Click" />
</div>

<div id="output">
  <h2>Result:</h2>
  <textarea name="result" id="result"></textarea>
</div>

Answer 4

您无法使用innerHTML属性获取输入元素的值。使用值代替：

 var val = documento.getElementById('value1').value;

此外，您还应记住，函数是在页面加载时执行的，而不是在提交表单时执行的。

Answer 5

代码不起作用，因为您是在加载窗口时而不是在单击提交按钮时调用此函数。由于没有表单，因此也没有正在进行的页面加载，因此建议将<input type="submit" value="Click" />切换为按钮。它们在功能上相似，并且在视觉上相同。使用按钮，尽管单击按钮时可以使用onclick属性来调用函数。参见下面的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <div class="field">
        <label for="value1">Introduce value</label>
        <input type="text" id="value1" name="value1" value="" />            
    </div>

    <div class="button-block">
        <button onclick="printOutput()">Click</button>
    </div>

    <div id="output">
        <h2>Result:</h2>
        <textarea name="result" id="result"></textarea>
    </div>

</body>
</html>

然后在您的script.js中，

function printOutput(){
    var val = document.getElementById('value1').value;

    document.getElementById('result').innerHTML = val;
}

Answer 6

<script>
$( document ).ready(function() {
    setTimeout(function(){
        var val = document.getElementById('value1').innerHTML;
        var generateHere = document.getElementById("result");
        generateHere.innerHTML = val;
    }, 2000);
});
</script>

将JavaScript变量发送到HTML页面

6 个答案: