下記のような、HTMLコードを作ったのですが、4つほど問題があり詰まってます！ 1つ目は、占いボタン

締切済

質問者：タカイヌ
質問日時：2021/07/08 01:37
回答数：2件

下記のような、HTMLコードを作ったのですが、4つほど問題があり詰まってます！
1つ目は、占いボタンをおしても画像だけ変わり、文字かひょうじされないこと
2つ目は、削除ボタンを押しても変化がないこと
3つ目は、花言葉が改行できないこと
4つ目は、各花ごとに、CSSを適用したいのですがやり方が分かりません
<!DOCTYPE html>
<html lang="ja">

<head>
<title>花占い</title>
<meta charset="UTF-8">
<link rel="stylesheet"href="d.css">
</head>

<body>

<h1>今日の占い</h1>
<input type="button"value="占う"onclick="uranai()">
<input type="button"value="削除"onclick="del()"/>
<img id="image"src="r.jpg"/>
<div id="kekka"></div>

<script>
function uranai() { let num = Math.ceil(Math.random() * 12);
let books = document.getElementById("kekka"); let y = document.getElementById("are");
let elm = document.createElement("p");
let tha = document.createElement("p");
let txt;
let led;
let x = document.getElementById("image"); if(num === 1) {
txt = document.createTextNode("シンビジウム"); led = document.createTextNode("花言葉『飾らない心』『素朴』『壮麗』『華やかな恋』『高貴な美人』『誠実な愛情』『深窓の麗人』"); x.setAttribute("src","1.jpg");
} else if(num === 2) {
txt = document.createTextNode("フリージア");
led = document.createTextNode("シンビジウム"); x.setAttribute("src","2.jpg");
} else if(num === 3) {
txt = document.createTextNode("チューリップ"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","3.jpg");
} else if(num === 4) {
txt = document.createTextNode("桜");
led = document.createTextNode("シンビジウム"); x.setAttribute("src", "4.jpg");
} else if(num === 5) {
txt = document.createTextNode("すずらん");
led = document.createTextNode("シンビジウム"); x.setAttribute("src","5.jpg");
} else if(num === 6) {
txt = document.createTextNode("バラ");
led = document.createTextNode("シンビジウム"); x.setAttribute("src","6.jpg");
} else if(num === 7) {
txt = document.createTextNode("百合");
led = document.createTextNode("シンビジウム"); x.setAttribute("src", "7.jpg");
} else if(num === 8) {
txt = document.createTextNode("ひまわり");
led = document.createTextNode("シンビジウム"); x.setAttribute("src ","8.jpg");
} else if(num === 9) {
txt = document.createTextNode("ダリア");
led = document.createTextNode("シンビジウム"); x.setAttribute("src ","9.jpg");
} else if(num === 10) {
txt = document.createTextNode("ガーベラ");
led = document.createTextNode("シンビジウム"); x.setAttribute("src","10.jpg");
} else if(num === 11) {
txt = document.createTextNode("シクラメン");
led = document.createTextNode("シンビジウム"); x.setAttribute("src","11.jpg");
} else {
txt = document.createTextNode("ポインセチア"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","12.jpg");
}

tha.appendChild(led);
y.appendChild(tha);
elm.appendChild(txt);
books.appendChild(elm);

function del() {
let kakka = document.getElementById("kakka"); if(kakka.lastChild !== null）{
kakka.removeChild(kakka.lastChild);
}
}
}
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： sukitaro
回答日時：2021/07/08 15:44

No1です。

すみません、3つ目について、間違えていました。

createTextNodeは、<br />を文字列として表示してしまうようです。

参考：https://oshiete.goo.ne.jp/qa/4971075.html

上記ページの回答のように、document.createElement('br')を入れる方法があります。

失礼しました。