JavaScriptでHTMLを弄る
code:page1.html
<body>
<p id="aaa">AAA</p>
<p id="bbb">BBB</p>
</body>
code:page1.js
let elem = document.getElementById("aaa");
elem.style.color = '#FF8875';
BBB
code:page2.html
<body>
<button id="aaa">A Button</button>
<p id="bbb">BBB</p>
</body>
code:page2.js
let btn = document.getElementById("aaa")
btn.addEventListener('click', () => {
let elem = document.getElementById("bbb");
elem.innerHTML = "AAA";
});
[A Button]
BBB
↓ ボタンを押す
[A Button]
AAA
code:page3.html
<body>
<input type="text" id="textId">
<p id="msg"></p>
</body>
code:page3.js
let textId = document.getElementById("textId");
// 初期値を設定 (JS側から変更できる)
textId.value = "BBB";
// 変更を検知してHTML側を変更できる (クリック時に)
textId.addEventListener('click', () => {
let msg = document.getElementById("msg");
msg.innerText = textId.value;
});
[ BBB ]
BBB
↓ 入力
[ああああ]
ああああ