サンシャイン池崎の家は凄かった...。それとアトリビュートタグの使い方

サンシャイン池崎の実家に帰る企画というのがあり、以下のリンクで紹介されてますが、すごいですね。いい話や...。親が生きている内に恩返しはしたいものです。
サンシャイン池崎 空前絶後の実家TV初公開！母の愛情に「照れくさい」 – しらべぇ ｜ 気になるアレを大調査ニュース！

こんにちは。瀬戸際の沼田です。

今日は5月17日に書いた、プログラムを改良して見たのでメモしています。

5月17日に書いた、3の倍数のときのみ「あほ」を表示するプログラムを改善してみる

やりたいことは、

0から1ずつ1秒ごとにカウントアップして、3の倍数のときのみWebページ上に「あほ」と表示する。

というもの。

console.log("0517OK")
setInterval(() => {
document.body.innerText = a
console.log(a)
if (a % 3 == 0) {
document.body.innerText = "あほ"
} else {
document.body.innerText = a
}
a = a + 1
}, 1000)
var a = 0

で前回、var a = 0のグローバル変数が最後にあったりして見にくいとこと等を問題点に挙げたわけですが、先輩いわく「瀬戸際の沼田よ...問題はそこじゃない...」とのこと。

調べてみる(聞いてみる)と、最初のconsole.log("0517OK")はともかく、setInterval(() => {の後の

document.body.innerText = a
console.log(a)

が無駄のようで、htmlのタグの中を一回aに書き換えて、意味もなくconsoleにaと表示してから、if文の実行を行ってaをあほに書き換えている。

よって以下のように修正。

console.log("let's start!!")
var a = 0
setInterval(() => {
a = a + 1
if (a % 3 == 0) {
document.body.innerText = "あほ"
} else {
document.body.innerText = a
}
}, 1000)

これで無駄な処理はなくなりました。最初のconsole.logがlet's start!!に変わっているのは自分を勇気付けるためのおまじないで特に意味はありません。
しかし、あほの替わりにとある写真を表示したいので、アトリビュートタグというものを使ってみる。
コレ→< img src="[ファイル名]" >

アトリビュートタグ内の=の前後には半角スペースを入れない！

もう一度書いておきましょう。

アトリビュートタグ内の=の前後には半角スペースを入れない！！
これで覚えたはず...。

console.log("let's start!!")
var a = 0
setInterval(() => {
  a = a + 1
  if (a % 3 == 0) {
    document.body.innerHTML = '<img src="aho.jpeg ">'
  } else {
    document.body.innerText = a
  }
}, 1000)

またinnerTextでなくinnerHTMLを使い、HTMLタグは「"」もしくは「'」で囲っています。

この場合は「"」ではimg src =までを「"」内と認識してしまうので、「'」で囲っています。

ふ〜やれやれ。自分が検索で↑のページに出会ったとしたら、何年前だよ...。と思いますが、自分で作ると楽しいですね。

今日より明日は改善するように頑張っていきます(><)