h1の今入っている要素に別の要素を付け足すjsを書きたいです。

Question

今、h1にはある言語が入っていて、それに別の言語をプラスさせたいと思っています。
例えば下記のソースの場合だと【<h1>ここはh1です001</h1>】となるようにしたいという事です。
変数に置き換えてやったのですが、下記ではうまくいきません。

最終的にはプルダウンを付けて、そのプルダウンの選んだものによって<h1></h1>の値を変えていきたいので、
このようなjsを作りたいと思っています。

<h1 id="midashi">ここは</h1>
<p>これはサンプルの本文です。</p>
<select name="select" class="extraction">
  <option value="001">001</option>
  <option value="002">002</option>
</select>

<script>
var h1_comment = document.getElementById( 'midashi' );
var select_val =  $(".extraction").val();

if (select_val="001") {
h1.textContent = h1_comment + "h1です001";
} else if  (select_val="002") {
h1.textContent = h1_comment + "h1です002";
}
</script>

Comments

[shinji709]

ロジック以前に文法ミスがありますね。h1.textContentとありますがh1は定義されていません。h1_comment.textContentの書き間違いでは。またselect_val=とありますがやりたいことは代入ではなく比較でしょうから==または===では？

[退会済みユーザー]

ご指摘ありがとうございます。文法ミスをしていました。
そちらは直す事できたのですが、下記がうまく代入できていなく、[object HTMLHeadingElement]になってしまいます。

【var h1_comment = document.getElementById( 'midashi' );】

[BluOxy]

yambejpさんの回答にもありますが、jQueryは導入済みでしょうか。

Answer 1

以下を参考にしてみてください

JavaScript セレクトボックスの値を取得/設定するサンプル
https://itsakura.com/js-selectbox

Answer 2

いくつか問題があります

• 一部jQueryが混じっています
• if内の比較演算子「==」が代入演算子「=」になっています
• h1_commentはDOM要素なのに文字列を連結しています

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var h1_comment = document.querySelector('#midashi');
var h1_org_text=h1_comment.textContent;
var ext=document.querySelector(".extraction");
ext.addEventListener('change',()=>{
if (ext.value=="001") {
h1_comment.textContent = h1_org_text + "h1です001";
} else if(ext.value="002") {
h1_comment.textContent = h1_org_text + "h1です002";
}
});
});
</script>
<h1 id="midashi">ここは</h1>
<p>これはサンプルの本文です。</p>
<select name="select" class="extraction">
<option value="001">001</option>
<option value="002">002</option>
</select>

[yambejp]

ロード時にも適用したいならもうちょい工夫が必要

Answer 3

問題点が2つ見つかったので分けて書きました。

(index):xx Uncaught ReferenceError: h1 is not definedとエラーが発生する

h1 という変数が定義されていないという意味です。

実際にxx行目を見ると h1.textContent = h1_comment + "h1です001"; でエラーが出ています。
今回は <h1 id="midashi">ここは</h1> に文字列を足したいということなので、h1.textaContent ではなく h1_comment.textContent ではないでしょうか。

var h1_comment = document.getElementById( 'midashi' );
- h1.textContent = h1_comment + "h1です001";
+ h1_comment.textContent = h1_comment+ "h1です001";

h1_commentをconsole.log()などで確認すると[object HTMLHeadingElement]が表示される

まずh1_commentが[object HTMLHeadingElement]なのはDocument.getElementById()の仕様です。

Document の getElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。

この Element オブジェクトから、欲しい情報を引き出して使います。

textContent は Element オブジェクト(実際には Node インターフェイス)のプロパティです。
なので、もし h1_comment からタグ内に書かれた文字を取得したい場合は、 h1_comment.textContent のように書く必要があります。

var h1_comment = document.getElementById( 'midashi' );
- h1_comment.textContent = h1_comment + "h1です001";
+ h1_comment.textContent = h1_comment.textContent + "h1です001";

jsfiddle

Comments

[退会済みユーザー]

ご丁寧に教えて頂きありがとうございました。