1
私は、ユーザー入力をJavaScript関数でキャンバスの表示を変更させようとしています。私は修正できないような2つの問題にぶつかってきました。 1）私のdocument.getElementById（ "name"）がキャンバスに表示されておらず、selectステートメントも消えています。 2）キャンバスの背景色を赤または青に変更するifループを取得しようとしています。しかし、私はそれを自分で行う方法を知らない。そのような言葉になる質問を申し訳ありません。どんな助けでも大歓迎です。（HTML + Javascript）キャンバスに表示するテキスト入力と背景を埋めるためのラジオボタン入力を取得する
<html>
<head>
<title>Greeting Card Generator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var bt = document.querySelector("#draw");
function draw() {
var c = document.getElementById("card");
var ctx = c.getContext("2d");
ctx.strokeStyle = "orange";
ctx.lineWidth = 10;
ctx.strokeRect(125, 25, 960, 540);
ctx.fillStyle = "black";
ctx.textAlign = "start";
ctx.font = "22px Arial";
ctx.fillText(document.getElementById("name", 435, 55));
ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 535, 95);
var redButton = document.getElementById("bgRed");
var blueButton = document.getElementById("bgBlue");
if (redButton.checked) {
//fill background red
} else if (blueButton.checked) {
//fill background blue
}
document.getElementById("div1").style.visibility = "hidden";
document.getElementById("div2").style.visibility = "hidden";
}
//bt.addEventListener("click",draw);
</script>
<style>
#div1{
background-color: cyan;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
text-align: center;
border: 25px solid red;
padding: 25px;
width: 50%;
margin: 0 auto;
}
#div2{
background-color: cyan;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 16px;
text-align: center;
border: 25px solid orange;
padding: 25px;
width: 50%;
height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="div1">Greeting Card Generator</div>
<div id="div2">
What Kind of Greeting Would You Like?<select name="greet" id="greet">
<option value="-1" selected>-Select-</option>
<option value="1">Birthday</option>
<option value="2">Graduation</option>
<option value="3">Engagement</option>
</select>
<br>
What is the name of the recipient<input type="text" id="name" name="name"/>
<br>
What background colour would you like on the card?
<input type="radio" name="background" id="bgRed" value="red" checked/>Red
<input type="radio" name="background" id="bgBlue" value="blue" />Blue
<br>
<input type="button" value="make card" id="draw" onclick="draw();">
</div>
<canvas id="card" width="1400" height="900"></canvas>
</body>
