Javascriptで空文字を名無しと表示させたい

前提

Javascriptで空文字を名無しと表示する方法

実現したいこと

おみくじサイトで入力された名前を表示する。

usernameが空文字の時に名前を「名無し」と表示させたい


### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>練習</title>
  </head>
  <body>
    <p>ようこそ<span id="name">テスト</span>さん！</p>
    <p>あなたの運勢は<span id="result">大吉</span>です！</p>
    <img src="omikuji.png">
    <script type="text/javascript" src="omikuji.js"></script>
  </body>
</html>

Javascript
let name;
let username;
let userresult;

username = prompt("お名前を教えて下さい。");
document.getElementById("name").innerHTML = username;

if (username == "") { 
  username = "名無し";
}

let rand = Math.floor( Math.random() * 5) ;

if (rand == 0) {
    userresult = "大吉";
  }

  if (rand == 1) {
    userresult = "中吉";
  }
  if (rand == 2) {
    userresult = "小吉";
  }
  if (rand == 3) {
    userresult = "吉";
  }
  if (rand == 4) {
    userresult = "凶";
  }

  document.getElementById("result").innerHTML = userresult;

試したこと

上記のコードだと空文字のまま進めても名前が表示されない
usernameをnameに変えても変化なし、またこの際非推奨というエラーがでます。

行動規範の内容に同意します

回答2件

javascript
1const username = prompt("お名前を教えて下さい。")||"名無し";
2console.log(username);

投稿2022/07/21 00:42

yambejp

総合スコア114843

js
1username = prompt("お名前を教えて下さい。");
2document.getElementById("name").innerHTML = username;
3
4if (username.lengh) { 
5  username = "名無し";
6}
7document.getElementById("name").innerHTML = username;
8

かなあ。名前変えてから新しい名前を出力してないだけ。

投稿2022/07/20 13:03

usekay

総合スコア395

usekay

2022/07/20 13:04

document.getElementById("name").value = username; のほうがより適切？

think49

2022/07/21 03:07 編集

@usekayさん span要素ノードはvalueプロパティを持ちませんので、textContentが妥当かと思います。 (現行コードだと名前にタグを使って、いろいろと仕込めます) document.getElementById("name").textContent= username; テキストノードを見るなら、dataプロパティでもよいですね。 document.getElementById("name").firstChild.data = username;

行動規範の内容に同意します

あなたの回答