JavaScript、HTML を使用して三角形の面積を計算し、CSS を使用してページのスタイルを設定しようとしています。
CSS に少し問題があり、JS をどこから始めればよいのか本当にわかりません。解決策を探しているわけではありませんが、開始するのにちょうど良い場所であり、おそらくいくつかのリンクをいただければ幸いです。私がしなければならないことは次のとおりです。
CSS についても、現在の結果では、テキストと画像が私が目指している方法で中央に配置されていないことがわかります。テキストのブロックを中央に配置しましたが、テキスト自体は中央に配置されていません (text-align: center を使用しようとしましたが、機能していないようです)。
最後に、Firefox で「画像を表示」してなぜ機能しないかを確認すると、「エラーが含まれているため表示できません」と表示されますが、Windows では画像が正常に表示されます。
ここに私のコードがあります (繰り返しますが、どこから始めればよいかわからないので JS はありません):
<!DOCTYPE html>
<html>
<head>
<title>HTML5 template</title>
<link rel="stylesheet" type="text/css" href="homework14.css">
</head>
<body>
<header>Homework 14</header>
<div id="table1">
<div id="table2">
<div id="table3">
<div id="triangle">
<img src="triangle.gif">
</div>
<div id="table4">
<form>
<label for="width">Width (b):</label>
<input type="text" id="width" name="width">
<label for="height">Height (h):</label>
<input type="text" id="height" name="height">
</form>
Enter the width and height of your triangle to calculate the area
<input type="button" value="Calculate area">
</div>
</div>
<hr>
<div id="table5">
<form>
<label for="area">The area is:</label>
<input type="text" id="area" name="area">
</form>
</div>
</div>
</div>
</body>
</html>
CSS:
#table1 {
width: 500px;
height: 350px;
border: solid red;
}
#table2 {
border: solid blue;
padding: 10px;
margin: auto;
width: 50%;
width: 450px;
height: 300px;
margin-top: 10px;
}
#table3 {
margin: auto;
width: 50%;
}
#table4 {
margin: auto;
width: 50%;
}
#table5 {
margin: auto;
width: 50%;
font-weight: bold;
width: 300px;
}
#triangle {
display: block;
margin: auto;
width: 50%;
}
hr {
color: blue;
background-color: blue;
height: 5px;
}
ここには答えなければならないことがたくさんあることを知っているので、特に JavaScript に関して、どんな助けでも大歓迎です。ありがとう!!
jQuery のドキュメントを参照してください。DOM の操作を始めたばかりの初心者に最適です。ただし、Web アプリケーションの開発に真剣に取り組んでいる場合は、Angular 2、VueJS、または React などのフレームワーク/ライブラリを使用することをお勧めします。jquery を使用しているサンプル JavaScript を次に示します。
// put this at very bottom of your html right before </body>
<script>
// using jquery we can get the values inside the input boxes
var height = $("#height").val();
var width = $("#width").val();
var error = false;
if(height <= 0) {
error = true;
}
if(width <= 0) {
error = true;
}
if(width > 2 * height) {
error = true;
}
if(height > 2 * width) {
error = true;
}
if(!error) {
var area = .5 * height * width;
$("#area").val(area);
}
</script>
画像の何が悪いのかわからないので、別のSOの質問のために保存してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加