-3
私がしようとしているのは、1から12の入力値を入力すると、色が対応するボックスに入力されます。 1-4は赤、5-9は黄、10-12は緑で、灰色のボックスはリセットボタンになります。私はJavaScriptの本を読んでいて、これについてどうやってどうやって進めるかを考え出すのに少し時間を割いています。これに取り組む方法についての少しの洞察は大きな助けとなり、高く評価されます。Javaスクリプトコードはどこから始めるのですか？
body {
background-color: #006699;
}
#fm {
float: left;
position: absolute;
margin-left: 35%;
margin-top: 20.7%;
}
#wrap {
float: left;
position: absolute;
margin-left: 15%;
margin-top: 20%;
}
#green{
/*background-color: #00ff00; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(0, 255, 0, 1);
}
#yellow{
/*background-color: #ffff00; */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(255, 255, 0, 1);
}
#red{
/* background-color: #ff0000; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(255,0,0,1);
}
#gray{
/* background-color: #c0c0c0; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(192,192,192,1);
}
#green:active {
background-color: #00ff00;
}
#yellow:active {
background-color: #ffff00;
}
#red:active {
background-color: #ff0000;
}
#gray:active {
background-color: #c0c0c0;
}<!DOCTYPE html>
<html>
<head>
<title> Square </title>
<link rel="stylesheet" type="text/css" href="square.css">
</head>
<body>
<div id="wrap">
<div id="green"></div>
<div id="yellow"></div>
<div id="red"></div>
<div id="gray"></div>
</div>
<form id="fm">
<b>Input value from 1-12</b> <br>
<input type="text" id="inputvalue" name="value">
</br>
</form>
</body>
<link rel="javascript" type="text/javascript" href="square.js">
</html>
TO 'link'はjavascriptのためではない - ' script'タグを使用します。 –