どうも、ソエです。

学校の課題でJavaScriptを使って、テキストを変更したのでそれをメモするためにも書いてみました。

では、どうぞ。

サンプル

まずは、完成品を見てどんな風になるのか。

テキストボックス(白い背景の部分)の中を入力し、変更ボタンをクリックすると下のテキストが変わります。

ここのテキストが変更されます。

書き方

では、コードを書いていきます。
今回、CSSは関係ないのでCSSはないです。

HTML

class=”change”が変更させるテキスト。
class=”textbox”が変更させたいテキスト。
class=”editbtn”が変更させるときにクリックするボタンです。

<div class=”change”>ここのテキストが変更されます。</div>
<input class=”textbox” value=”このテキストが反映されます。”>
<button class=”editbtn”>変更</button>

JavaScript

クリックしたときに、innerHTMLを変える、というコードを書いています。

let change= document.querySelector(“.change”);
let textbox = document.querySelector(“.textbox”);
let editbtn = document.querySelector(“.editbtn”);

editbtn.addEventListener(“click”,function(){
change.innerText = textbox.value;
})

終わりに

いかがでしたか?
案外簡単に変えれますよね。

テキストを変えたい場合ってまあまああると思うので、参考になれば、と思います。

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

JavaScriptでテキストを変えてみる