Question

我正在努力将放入文本输入框的值传递给用户键入的另一个文本输入框。我把所有东西都用在jsfiddle上，但由于某种原因，如果我在其他任何地方使用它，我就无法工作。我使用纯javascript，而不是jquery。

所以，这是我的HTML代码

    <input id="imput1" type="text" class="firstbox">
    <p>Box to Retrieve The Input</p>
    <br />

    <input id="gift_card_recipient" type="text" class="replica" value="box1" />
    <input type="text" class="replica2" value="box2" />

我使用的Javascript将用户输入的值从第一个框输入到第二个框：

(function() {
var var1   = document.getElementById('imput1'),
    var2   = document.getElementById('gift_card_recipient'),
    callback = function () {
        var2.value = this.value;
    };

if (var1.addEventListener) {
    var1.addEventListener('keyup', callback);
} else {
    var1.attachEvent('onkeyup', callback);
}
}());

再一次，我让这个工作在jsfiddle，这是一个它看起来像的演示，但由于某种原因，如果我在我的电脑上使用它在html文件，或在我的服务器上，它不会工作。我在标题中链接js文件，并在chrome中检查它。这是我从chrome得到的错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

不确定为什么抛出它。但这是我的jsfiddle，我有实际工作。但不在服务器或我的电脑上：http://jsfiddle.net/C3SPM/

Answer 1

将您的脚本块包含在正文的末尾（或在相关元素之后）。或者将代码包装在onload / onDomReady处理程序中。

您获得的具体错误是因为您的代码在解析有问题的元素之前正在运行，这意味着document.getElementById('imput1')返回null，因为它无法找到该元素。它在一个小提琴中起作用的原因是默认情况下jsfiddle在一个onload处理程序中包装任何JS，所以当代码运行时，已经解析了元素（你可以使用drop来改变jsfiddle中的这个设置 - 在“框架和扩展”下的左侧。

使用Javascript自动传递输入值

1 个答案: