web-dev-qa-db-ja.com

このJavaScript変数をHTMLで使用するにはどうすればよいですか？

名前を尋ねるシンプルなページを作成し、name.length（JavaScript）を使用して名前の長さを計算しようとしています。

これはこれまでの私のコードです：

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>

前に述べた変数を使用できるようにするために、bodyタグ内に何を入れるべきかよくわかりません。これはおそらく初心者向けの質問だと思いますが、答えが見つからないようです。

javascripthtmlvariables
12
Joseph

HTMLでJavaScript変数を「使用」しないでください。 HTMLはプログラミング言語ではなく、マークアップ言語であり、ページがどのように見えるかを「記述」するだけです。

画面に変数を表示する場合は、JavaScriptを使用します。

まず、次の場所に書き込むための場所が必要です。

<body>
    <p id="output"></p>
</body>

次に、その<p>タグに書き込むためにJavaScriptコードを更新する必要があります。必ず確認してくださいafterページの準備ができました。

<script>
window.onload = function(){
    var name = Prompt("What's your name?");
    var lengthOfName = name.length

    document.getElementById('output').innerHTML = lengthOfName;
};
</script>

window.onload = function() {
  var name = Prompt("What's your name?");
  var lengthOfName = name.length

  document.getElementById('output').innerHTML = lengthOfName;
};
<p id="output"></p>
26
Rocket Hazmat

<p>要素を作成できます：

<!DOCTYPE html>
<html>
  <script>
  var name = Prompt("What's your name?");
  var lengthOfName = name.length
  p = document.createElement("p");
  p.innerHTML = "Your name is "+lengthOfName+" characters long.";
  document.body.appendChild(p);
  </script>
  <body>
  </body>
  </html>
5
user1823

Idを持つ要素を作成し、その要素にその長さの値を割り当てることができます。

var name = Prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;
<p id='message'></p>
4
imran qasim

これを試して：

<body>
    <div id="divMsg"></div>
</body>
<script>
    var name = Prompt("What's your name?");
    var lengthOfName = name.length;
    document.getElementById("divMsg").innerHTML = "Length: " + lengthOfName;
</script>
1
Márcio Gonzalez

Html内でjs変数を使用することはできません。 javascript変数のコンテンツをhtmlに追加するには、innerHTML（）を使用するか、任意のhtmlタグを作成し、その変数のコンテンツを作成したタグに追加し、そのタグを本文またはhtml内の既存のタグに追加します。

0
Kalyan Kumar S

編集するHTMLタグはDOM（ドキュメントオブジェクト操作）と呼ばれ、ドキュメントグローバルオブジェクトの多くの機能を使用してDOMを編集できます。

ほとんどすべてのブラウザで動作する最良の例は、document.getElementById、そのi​​dが属性として設定されたhtmlタグの検索です。

より簡単ですが、最新のブラウザ（IE8 +）でのみ機能するquerySelector関数という別のオプションがあります。一致するセレクター（CSSセレクター）を持つ最初の要素が見つかります。

両方のオプションの例：

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
  <p id="a"></p>
  <p id="b"></p>
  <script>
    document.getElementById('a').innerHTML = name;
document.querySelector('#b').innerHTML = name.length;</script>
</body>
0
InvisibleUn1corn