2017-11-22 15 views
-1

JavascriptのinnerHTMLプロパティを使用して文字列をHTMLに挿入しようとしています。 しかし、それは動作していません。最初にshowtime()関数で試してみましたが、機能しなかったので、先頭にwindow.onloadを追加しました。Javascript innerHTML基本的な問題

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script> 
    window.onload = function Hello() { 
    var timeArea = document.getElementById("time"); 
    var text = "Hello"; 
    timeArea.value = text; 
}; 
Hello(); 
</script> 
</head> 
<body> 
<div id="time"> 
    What time is it? 
</div> 
</body> 
</html> 
+1

'timeArea'は' value'プロパティを持たない 'DIV'を指します。 'innerHTML' /' textContent'を使います。 'timeArea.textContent + = text'が必要かもしれません – Satpal

+1

' innerHTML'はどこですか? –

+0

ちょうどグーグル.... ここでの最初の結果です:[w3schools](https://www.w3schools.com/jsref/prop_html_innerhtml.asp) –

答えて

2

代わりの.valueあなたがHTMLでテキストを挿入しようとしている.innerHTMLを使用しています。

.valueは、htmlタグではなく、htmlタグ内にテキストを挿入しない入力タイプに使用されます。

window.onload = function Hello() { 
 
    var timeArea = document.getElementById("time"); 
 
    var text = "Hello"; 
 
    timeArea.innerHTML = text; 
 
};
<div id="time"> 
 
    What time is it? 
 
</div>

またwindow.onload後に呼び出さhello()機能を削除します。 window.onloadは自動的にhello関数を実行します。

+0

コードを投稿するだけではなく、この質問に答えられる理由を説明してください。 –

+0

@PatrickHund投稿者を編集していました。そしてそれまであなたはダウンボートを出しました。説明が必要なことも知っています。 –

+2

@CodeLღver - あなたが悪い回答を投稿してからそれを改善するために編集すると、悪い時に人々がそれを投票することを期待するべきです! **終了**あなたが答える*をクリックする前に**答えを書く**。 – Quentin

0

これは、div要素に値プロパティがないためです。 あなたは、このようにコードを変更する必要があるいくつかのテキストを挿入したい場合:

<script> 
    window.onload = function Hello() { 
     var timeArea = document.getElementById("test"); 
     var text = "Hello"; 
     document.getElementById("test"); 
     timeArea.textContent = text; 
     }; 
</script> 
    <div id="time"> 
     <p id="test"> 

     </p> 
    </div> 

をあなたは意志でそのテキストを変更し、Pでそれを印刷することができますので、私はP要素を作成しました。 H1、H2などの他の要素を使用できます。

textContentその要素からテキストを選択し、変数textと同じにするとその値が表示されます。

私はこれが答えられたことを知っていますが、これはそれを行う別の方法です。