取得した情報を使って、表示の置き換えをしたい

前提・実現したいこと

javascriptを始めたばかりの初心者です。
やりたいこととしては

・入力フォームに入れた数字に対応して文字の出しわけを行いたい
・出しわけをした文字は、HTML内の「最初の文字」と切り替えて出したい
・innerHTMLもしくはinnerTEXTを利用して実装したい
です

「送信」ボタンを押下するとコンソールに以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot create property 'innerHTML' on string '100'
    at getValue 
    at HTMLInputElement.onclick

該当のソースコード

HTML
1  <body>
2<div id="mydiv">
3     <h1>最初の文字</h1>
4</div>
5
6<input type="text" id="text"  placeholder="入力する">
7<input type="button" value="送信" onclick="getValue('text')">
8　</body>

javasuript
1function getValue(text){
2    var score = document.getElementById(text).value;
3    var mydiv = document.getElementById("score");
4    score.innerHTML = "mydiv";
5if (0 <= score && score <= 100 ) {
6  ("100以内".bold().fontcolor("red")
7} else {
8   ("100以外".bold().fontcolor("blue"))

試したこと

if文のところに「document.write」を入れて表示の出しわけができることは確認しています。
入力した数字での表示置き換えについては、上記のエラーメッセージが表示されて成功していません

if (0 <= score && score <= 100 ) {
document.write("100以内".bold().fontcolor("red")
} else {
document.write("100以外".bold().fontcolor("blue"))

補足情報（FW/ツールのバージョンなど）

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

回答2件

ベストアンサー

エラーの原因はElementでなくvalueに対してinnerHTMLを記述してしまっているからです。

js
1    var score = document.getElementById(text).value;
2    var mydiv = document.getElementById("score");
3 // score.innerHTML = "mydiv";
4    mydiv.innerHTML = "mydiv";

で、スタイルを書き換えるにはElementのクラスを変えるか、Elementのstyleプロパティにアクセスしてください。

【JavaScriptでスタイルの動的変更方法 - Qiita】
https://qiita.com/takahiro_itazuri/items/559427278f315ed119fe

【JavaScriptによってHTMLやCSSを動的に書き変えるとは？】
https://www.1-firststep.com/archives/6558

【javascriptでCSSを操作してスタイルを設定する | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-】
https://designsupply-web.com/knowledgeside/3209/

投稿2019/04/14 05:53

kei344

総合スコア69400

deraono

2019/04/14 14:26

innerHTML記述の記述についてご指摘いただきありがとうございます。 styleの変更について試してみたいと思います！！また参考になるサイトをお知らせいただきましたこと、あわせてお礼申し上げます

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

こんな感じででしょうか？

<body>
<h1 id="mydiv">最初の文字</h1>

<input type="text" id="text"  placeholder="入力する">
<input type="button" value="送信" onclick="getValue('text')">
</div>

<script>
  function getValue(text){
    var score = document.getElementById("text").value;
    var mydiv = document.getElementById("mydiv");
    if (0 <= score && score <= 100 ) {
      score = "100以内".bold().fontcolor("red");
    } else {
      score = "100以外".bold().fontcolor("blue");
  }
  mydiv.innerHTML = score;
}

</script>
</body>

投稿2019/04/14 04:44

編集2019/04/14 04:47