JS：タグの中身を書き換える

書き換え

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ホームページを書き換える</title>
<script>
	function show(){
		// テキストボックスの文字を取得
		var moji = document.getElementById("moji").value;
		console.log(moji);
		document.getElementById("target").innerHTML = moji + "が入力されました";
	}
</script>
</head>
<body>
	<h1>ホームページを書き換える</h1>
	<p>
		<input id="moji" type="text" size="30" placeholder="ここに文字を入力してください">
		<input type="button" value="Push!" onclick="show()">
	</p>
	<p id="target">???</p>
</body>
</html>

計算

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>2つの数値の和を計算して表示</title>
	<script>
		function keisan(){
			// xyを取得
			var x = Number(document.getElementById("x").value);
			var y = Number(document.getElementById("y").value);
			
			// 計算
			var result = x + y;
			
			// 計算結果を表示
			document.getElementById("result").innerHTML = result;
		}
	</script>
</head>
<body>
	<h1>2つの数値の和を計算して表示</h1>
	<p>
		<input onkeyup="keisan()" type="text" size="10">＋
		<input onkeyup="keisan()" type="text" size="10">＝
		<span id="result">???</span>
	</p>
<!-- 	<p><input type="button" value="計算" onclick="keisan()"> -->
</p>
</body>
</html>

コメント