<form> <input type="text" name="text" /> <input type="button" id="btn1" name="btn" value="ボタン" onclick="testFunc(this.id,this.value,this.form.text.value)" /> </form> <script> function testFunc(a,b,c){ console.log(a); console.log(b); console.log(c); } </script>

const target1 = document.querySelector('#example-id'); const target2 = document.querySelectorAll('.example-class'); target1.style.setProperty('color', '#00f'); target1.style.setProperty('position', 'relative'); target1.style.setProperty('top', '3px'); target2.forEach(function (element) { element.style.setProperty('color', '#f00'); element.style.setProperty('font-weight', 'bold', 'important'); });

CSS

:root { --main-size: 256px; } .hoge { width: var(--main-size); }

JavaScript

document.documentElement.style.setProperty('--main-size', '96px');

// コメント

または

/* コメント */

DOMContentLoadedイベントは、HTMLが完全に読み込まれ、解析されたときに発生します。スタイルシートや画像などの外部リソースの読み込みを待つ必要はありません。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); });

loadイベントは、ページ全体（スタイルシートや画像などの外部リソースを含む）が完全に読み込まれたときに発生します。

window.addEventListener('load', function() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); });

名前付き関数を使用する場合

function onDOMContentLoaded() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); } document.addEventListener('DOMContentLoaded', onDOMContentLoaded);

function onPageLoad() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); } window.addEventListener('load', onPageLoad);

string = "12345678"; shuffledString = string.split('').sort(() => .5 - Math.random()).join(''); console.log(shuffledString);

<input type="text" id="textbox" value="全選択されるテキスト">

const textbox = document.getElementById('textbox'); textbox.addEventListener('focus', () => { textbox.select(); });

引数がundefinedのときデフォルト値が使われる。
nullのときは、デフォルト引数は適用されない。

const list = ["one", "two", "three"]; const result = list.join(" "); console.log(result); // "one two three"