0

ユーザーが入力するときに、テキスト入力ボックスに入力された値を別のテキスト入力ボックスに渡すことに取り組んでいました。私はすべてをjsfiddleで動作させましたが、何らかの理由で他の場所で使用すると動作しません。jqueryではなく純粋なjavascriptを使用しています。

だから、ここに私の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" />

そして、ユーザーが最初のボックスから2番目のボックスに入力するときに値を渡すために使用している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 で動作させることができました。これがどのように見えるかのデモですが、何らかの理由で、PC で html ファイルまたはサーバーで使用すると動作しません。ヘッダーにjsファイルをリンクしており、クロムでも検査しています。ここに私がクロムから得たエラーがあります:

Uncaught TypeError: Cannot read property 'addEventListener' of null

なぜそれを投げるのかよくわかりません。しかし、これが実際に機能する私のjsfiddleです。サーバーや私のPCにはありません：http://jsfiddle.net/C3SPM/

4

1 に答える 1

0

本文の最後 (または問題の要素の後) にスクリプト ブロックを含めます。または、コードを onload/onDomReady ハンドラーでラップします。

発生している特定のエラーは、問題の要素が解析される前にコードが実行されているためです。つまり、要素が見つからないためにdocument.getElementById('imput1')返されます。nullフィドルで機能する理由は、デフォルトで jsfiddle が任意の JS を onload ハンドラーにラップするため、コードが実行されると要素が解析されているためです (左側の [フレームワーク] の下のドロップダウンを使用して、jsfiddle でこの設定を変更できます)。 & 拡張機能」)。

于 2013-10-07T10:15:19.597 に答える