目次
とりあえず今日のところは以下の3つがあればOK。
○○さん、こんにちは！、をいろいろな方法で作ってみる。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test1</title>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<p>Hello, World!</p>
<p>名前：
<input id="edit" type="text" size="10"/>
<!--<input type="button" value="変更"/>-->
<button onclick="clicked()">変更</button>
</p>
<p><span id="name">世界</span>さん、こんにちは！</p>
</body>
</html>function clicked(){
var edit=document.getElementById("edit");
var name=document.getElementById("name");
name.innerHTML=edit.value;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test2</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<p>Hello, World!</p>
<p>名前：
<input id="edit" type="text" size="10"/>
<!--<input type="button" value="変更"/>-->
<button id="change">変更</button>
</p>
<p><span id="name">世界</span>さん、こんにちは！</p>
</body>
</html>$(function(){
$("#change").click(function(){
var $edit=$("#edit");
var $name=$("#name");
$name.text($edit.val());
});
});