index.html
main.js
‘use strict’; { document.addEventListener(‘keydown’, (e) => { document.querySelector(‘p’).textContent = e.key; }); }カテゴリー: Javascript
Javascript Input
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<input type="text">
<p></p>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
// input → text, textarea, select
// change → radio, checkbox
document.querySelector('input').addEventListener('input', () => {
const pElement = document.querySelector('p');
const inputElement = document.querySelector('input');
// pElement.textContent = inputElement.value;
pElement.textContent = inputElement.value.length;
});
}Javascirpt ラジオボタン
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="blue"> Blue
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
document.querySelectorAll('input').forEach((radio) => {
if (radio.checked === true) {
alert(radio.value);
}
});
});
}Javascirpt ドロップダウンリストの値にアクセス
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
alert(document.querySelector('select').value);
});
}Javascirpt フォーム部品の値にアクセス
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<!-- <input type="text"> -->
<textarea></textarea>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
// alert(document.querySelector('input').value);
// alert(document.querySelector('textarea').value);
document.querySelector('textarea').value = '';
});
}Javascript 要素の追加削除
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<ul>
<li class="target">Taro</li>
<li id="second">Jiro</li>
<li class="target">Saburo</li>
</ul>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const liElement = document.createElement('li');
liElement.textContent = 'Hanako';
// document.querySelector('ul').appendChild(liElement);
// document.querySelector('ul').insertBefore(
// liElement,
// document.querySelector('#second')
// );
if (confirm('Sure?') === true) {
document.querySelector('#second').remove();
}
});
}Javascirpt createElement
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<ul>
<li class="target">Taro</li>
<li id="second">Jiro</li>
<li class="target">Saburo</li>
</ul>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const liElement = document.createElement('li');
liElement.textContent = 'Hanako';
});
}Javascript DOM セレクター
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<ul>
<li>Taro</li>
<li>Jiro</li>
<li>Saburo</li>
</ul>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
// document.querySelector('li').textContent = 'Changed!';
// document.querySelectorAll('li')[0].textContent = 'Changed!';
// document.querySelectorAll('li')[1].textContent = 'Changed!';
// document.querySelectorAll('li')[2].textContent = 'Changed!';
document.querySelectorAll('li').forEach((li) => {
li.textContent = 'Changed!';
});
});
}Javascript classList
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
<style>
.pink-bg{
background: pink;
}
.red-border{
border: 2px solid red;
}
.green-color{
color: green;
}
</style>
</head>
<body>
<p>Hello</p>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict'
{
document.querySelector('button').addEventListener('click', ()=> {
//console.log('Clicked');
document.querySelector('p').classList.add('pink-bg', 'red-border');
document.querySelector('p').classList.add('green-color');
});
//console.log('Hello');
}Javascript textContent
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript</title>
</head>
<body>
<p>Hello</p>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict'
{
document.querySelector('button').addEventListener('click', ()=> {
//console.log('Clicked');
document.querySelector('p').textContent = document.querySelector('button').textContent;
});
//console.log('Hello');
}