色の値の入力、別の図形の色の変化、JavaScriptでの入力に詳しい人へ　大学の課題

ファイル名renshu.html

<!DOCTYPE html> <head> <title>練習</title> <link rel="stylesheet" href="./css/renshu.css"/> <script src="./js/renshu.js"><script> </head> <body> <fieldset class="BigBox1"> <fieldset class="Box1"> <input id="coloring1" type="text"> </fieldset> <fieldset class="Box2"> <input id="coloring2" type="text"> </fieldset> <fieldset class="Box3"> <input id="coloring3" type="text"> </fieldset> <button class="button">確定</button> <fieldset class="Box4">

     </fieldset>
 </fieldset>

</body> </html>

ファイル名renshu.css

.
fieldset{
vertical-align:middle
}

.BigBox1{
overflow:hidden
width:600px;
}

.Box1{
width:120px;
height:120px;
float:left
margin:10px 10px 10px 15px;
border-radius: 20px;
background-color: rgb(0,0,0);
}

.Box2{
width:120px;
height:120px;
float:left
margin:10px 10px 10px 15px;
border-radius: 20px;
background-color: rgb(0,0,0);
}

.Box3{
width:120px;
height:120px;
float:left
margin:10px 10px 10px 15px;
border-radius: 20px;
background-color: rgb(0,0,0);
}

.button{
width:80px;
height:30px;
float:left
margin:60px 60px 60px 60px;
border-radius: 5px;
background-color: gray;
}

.Box4{
width:120px;
height:120px;
float:left
margin:10px 10px 10px 15px;
border-radius: 20px;
background-color: rgb(0,0,0);
}

input{
width:26px;
margin-left:5px;
margin-right:5px;
vertical-align:-50px;
}

とこのような形でHTMLとCSSについては記述が完了しました。
左に３つの正方形を配置し、真ん中に確定ボタン、左に一つの正方形を配置します。
左のそれぞれ正方形に赤、緑、青の色の濃さを設定できるようにし、
真ん中の確定ボタンを押すことで
左の三つの色を混ぜ合わせた正方形を作るコードを作成したいです。
JSファイルはどのようなコードになると思いますか。
どなたか記述をよろしくお願いします。

mather

2021/09/13 06:26

学校の課題がわからないのであれば、担当の先生に素直に「わからない」と伝えましょう。

YoungHahifu

2021/09/13 06:51

大学の課題とお書きしたのは、この問題がなにかに役立つものではなく、明確な目的もないため大学の課題と表記したほうが想像しやすいと思ったため、そういう記述にきています。現在、Cなどを主に使う現場で次がモックアップ作成が主な業務なため自主的な課題として行っております。なので担当教員はいません。丸投げと思われても仕方ありませんが、では範囲を狭めて質問させてください。 html,cssのソースコードを入力によって変更する方法を探しています。

meg_

2021/09/13 07:05 編集

> 大学の課題とお書きしたのは、この問題がなにかに役立つものではなく、明確な目的もないため大学の課題と表記したほうが想像しやすいと思ったため、そういう記述にきています。ウソを書かれますとますます回答が付きずらくなると思います。ところでどの程度javascriptは勉強されていますか？

K_3578

2021/09/13 07:43

少なくとも丸投げである限りあなたの望む回答は得られないと思います

mather

2021/09/13 07:58

> 大学の課題と表記したほうが想像しやすいと思ったためなぜそう思ったかは僕には理解できませんでした。 Teratail の「推奨していない質問」にも記載されている通り、課題を代わりにやってもらうということはサービスの趣旨に反します。 https://teratail.com/help/avoid-asking 自主的な課題としてやるべきことを決めたのであれば、まずは自分自身で書いてください。具体的につまずいたポイントがあれば、「ここまでは出来たがこれが実現できない」とピンポイントに疑問点を質問することで回答がつくと思います。

Lhankor_Mhy

2021/09/13 08:31

初学者向けということであれば、回答でも片方をご紹介しましたが以下の二つのサイトをお勧めします。 https://jsprimer.net/ https://ja.javascript.info/ MDNはレファレンスとしてはいいのですが、学習テキストには向いていないと思います。 https://developer.mozilla.org/ja/docs/Web