1

それぞれの入力ボックスのIDの名前、タイトル、説明が記載されたフォームがあります。ただし、これらの値をHTMLで表示しようとすると、「[objectHTMLInputElement]」または「undefined」のいずれかが表示されます。

入力値を取得するために、関数の外部で変数name、title、descriptionをグローバルに宣言した、以下のコードブロックで「undefined」を取得します。

var name;
var title;
var description;      
document.getElementById("name").onchange = function(){
      name = document.getElementById("name").value;
      };
document.getElementById("title").onchange = function(){
          title = document.getElementById("title").value;
      };
document.getElementById("description").onchange = functio){
          description = document.getElementById("description").value;
      };

var myhtml = '<p>' + name + '</p><p>' + title + '</p><p>' + description + '</p><p>';

ただし、次のように、関数内で（「グローバルに」ではなく）変数を宣言すると、[objectHTMLInputElement]が取得されます。

document.getElementById("name").onchange = function(){
      var name = document.getElementById("name").value;
      };

myHTMLは、DOMに出力される変数です。

何が起きてる？グローバルに宣言されている場合は、名前、タイトル、説明を関数に渡してみました。しかし、それでも問題は解決しませんでした（まだ「[objectHTMLInputElement]」を取得しました）。

4

1 に答える 1

3

「未定義」の値は、入力が変更されるまで「onchange」イベントが発生しなかったためです。この jsfiddle は私の要点を示しています: http://jsfiddle.net/gR8td/。入力要素の値を入力すると、グローバル変数の新しい値が表示されることに注意してください。値を出力するために次の関数を追加しました。

function showInputs() {
    var myhtml = '<p>' + name + '</p><p>' + title + '</p><p>' + description + '</p>';
    var elem=document.getElementById('output');
    elem.innerHTML = myhtml;
}
于 2013-03-23T00:32:37.100 に答える