More than 1 year has passed since last update.

プログラマーへの道 #35 今までの動画の知識でメモ帳アプリを作る #16（プログラミング入門）のメモ

Last updated at 2023-07-03Posted at 2023-07-03

参考にした動画

学んだこと

・innerTextと改行文字"\n"を使って改行する。
・innerHTMLと改行タグ
を使って改行する。

innerTextと改行文字"\n"を使って改行する。

・動画の5：00〜ぐらいからモーダルのエラー表示を改行するという制御についてですが、実験してみたら改行文字"\n"を使って改行できた！
・改行文字"\n"は文字として
扱われというのを思い出してシンプルにerrorMessage.innerTextに'+'を付けて改行文字"\n"を文字連結すればモーダルのエラー表示を改行できそうと思ったらできた。

const errorMessage = document.getElementById("id-validation-error-in-add-modal")
// titleは1文字以下と100文字以上はだめ
if(1 > title.length || title.length > 30){
    errorMessage.innerText = "タイトルの文字は1文字以上30文字以内にしてください。"
}
// 本文の文字数が1文字未満100文字以上であればエラー分を出力する。
const bodyErrorMessage = document.getElementById("id-body-validation-error-in-add-modal")
if(1 > body.length || body.length > 100){
    errorMessage.innerText = errorMessage.innerText + "\n" + "本文の文字は1文字以上100文字以内にしてください。"
}
// errorMessageのinnerTextが0文字以上であればエラーを出力しない
if(errorMessage.innerText.length > 0){
    errorMessage.style.display = ""
    return
}

ブラウザ

innerHTMLと改行タグ`<br>`を使って改行する。

const errorMessage = document.getElementById("id-validation-error-in-add-modal")
// エラー文が出力後、エラー文の内容で訂正したら該当のエラー文が消える
errorMessage.innerHTML = ""
// titleは1文字以下と100文字以上はだめ
if(1 > title.length || title.length > 30){
    errorMessage.innerHTML = "タイトルの文字は1文字以上30文字以内にしてください。<br>"
}
// 本文の文字数が1文字未満100文字以上であればエラー文を出力する。
if(1 > body.length || body.length > 100){
    errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字は1文字以上100文字以内にしてください。<br>"
}
// errorMessageのinnerTextが0文字以上であればエラーを出力しない
if(errorMessage.innerHTML.length > 0){
    errorMessage.style.display = ""
    return
}