JavaScriptで生成された入力タグにテキストが表示されない

JavaScriptで入力タグをDOMに挿入しようとしました。入力タグのinnerHTMLプロパティをテキストに設定すると問題が発生します。JavaScriptで生成された入力タグにテキストが表示されない

私が気づいたことの1つは、ChromeデベロッパーツールでJavaScriptで生成された入力に終了タグが付いていたことでした。入力タグは自己閉じタグではありませんか？

私が開発者ツールをチェックしたところ、エラーは発生しません。また、要素を調べると、入力されたタグは関連するテキストとともに表示されますが、ウィンドウには表示されません。どんなアイデアでも、この問題の原因は何ですか？

//javascript 
function Survey() {} 

Survey.prototype.displaySurvey = function() { 
var form = document.createElement("form"); 
form.setAttribute("action", "none"); 
form.setAttribute("method", "get"); 
document.body.appendChild(form); 

var input = document.createElement("input"); 
input.setAttribute("name", "prod"); 
input.setAttribute("type", "text"); 
input.innerHTML = "product"; 
form.appendChild(input); 
} 

window.onload = main; 

function main() { 
    var survey = new Survey(); 
    survey.displaySurvey(); 
} 


<!DOCTYPE html> 
<html> 
<head> 
<title>form test</title> 
<script type="text/javascript" src="survey1.js"></script> 
</head> 
<body> 
</body> 
</html>

出典

2017-10-12 Troy Leu

''は 'innerHTML'を持っていません - 彼らは' value'を持っています –

は動作しません。 Per the MDN docs：

許可コンテンツなしには、それが空の要素です。

あなたは、単に値を「オプション」以下に、あなたのJavascriptを変更する入力を追加したい場合はvalue属性

出典

2017-10-12 00:23:00 Ben

こんにちはを編集し、そこにテキストが必要な場合。これは、新しく作成されたdiv内にid "content"を持つ入力フィールドを作成します。

function Survey() {} 

Survey.prototype.displaySurvey = function() { 
    var form = document.createElement("form"); 
    form.setAttribute("action", "none"); 
    form.setAttribute("method", "get"); 
    document.body.appendChild(form); 

    /*var input = document.createElement("input"); 
    input.setAttribute("name", "prod"); 
    input.setAttribute("type", "text"); 
    input.innerHTML = "product"; 
    form.appendChild(input);*/ 
    document.getElementById("content").innerHTML ="<input type='text' name='prod' value='product' />"; 
} 

function main() { 
    var survey = new Survey(); 
    survey.displaySurvey(); 
} 

//window.onload = main; 
window.onload = function(){ 
    main(); 
};

し、HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>form test</title> 
<script type="text/javascript" src="survey1.js"></script> 
</head> 
    <body> 
     <div id="content"> 
     </div> 
    </body> 
</html>

は、この情報がお役に立てば幸い！

出典

2017-10-12 01:02:55

なぜしましたか？window.onload = function（）{main（）; }; window.onload = mainの代わりに。？ –

私はそれをしました。ローカルでテストしたときに、何らかの理由で 'window.onload = main; 'だけで動作することができなかったからです。しかし、それがあなたのやり方をするなら、それはうまくいきます。 'window.onload = function（）{main（）; }; 'onloadイベントに対して複数のことを行うことができます。 [here]（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload）を参照してください。 –

私は 'window.onload = main;'で再度テストしましたが、うまく動作します。私のテストでバグがあったのかもしれません。がんばろう！ –

JavaScriptで生成された入力タグにテキストが表示されない

答えて

関連する問題