javascript - 如何部分刷新我的
问题描述
我已经使用 JavaScript 在 HTML 页面上进行了个性测试。基本上，用户选择一个问题的答案，下面的段落会更改内容，并且一个黑点出现在彩色网格（我使用画布元素创建）中，以指示您的个性颜色。
起初，一切似乎都运作良好。问题是，如果您已经完成了一次并想再做一次，您不能只选择其他答案之一并单击绿色按钮。现在两个黑点将出现在彩色网格中。有人知道如何在我的 JavaScript 代码中解决这个问题吗？
这是我的代码：
// The draw function loads when the page is opened
function draw() {
let canvas = document.getElementById('canvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
// The 4 colored squares
ctx.fillStyle = 'rgb(204, 51, 0)';
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = 'rgb(51, 153, 51)';
ctx.fillRect(0, 150, 150, 150);
ctx.fillStyle = 'rgb(255, 255, 0)';
ctx.fillRect(150, 0, 150, 150);
ctx.fillStyle = 'rgb(51, 102, 204)';
ctx.fillRect(150, 150, 150, 150);
}
}
const form = document.querySelector('form');
let btn = document.querySelector('button');
let para = document.querySelector('p');
//Event listener for the button
btn.addEventListener('click', myColor);
function myColor() {
let choice = form.color.value;
let canvas = document.getElementById('canvas');
if (!choice) {
para.textContent = 'Please chose one of the answers above.';
}
if (choice === 'red') {
para.textContent = 'You´re so red!';
// Adding a black circle to indicate color on canvas
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 23, 0, Math.PI * 2, true);
ctx.fillStyle ='rgb(0, 0, 0)';
ctx.fill();
}
} else if (choice === 'blue') {
para.textContent = 'You´re so blue!';
// Adding a black circle to indicate color on canvas
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(225, 225, 23, 0, Math.PI * 2, true);
ctx.fillStyle ='rgb(0, 0, 0)';
ctx.fill();
}
}
else if (choice === 'yellow') {
para.textContent = 'You´re so yellow!';
// Adding a black circle to indicate color on canvas
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(225, 75, 23, 0, Math.PI * 2, true);
ctx.fillStyle ='rgb(0, 0, 0)';
ctx.fill();
}
}
else if (choice === 'green') {
para.textContent = 'You´re so green!';
// Adding a black circle to indicate color on canvas
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 225, 23, 0, Math.PI * 2, true);
ctx.fillStyle ='rgb(0, 0, 0)';
ctx.fill();
}
}
}<body onload="draw();">
<form action="">
<h1>A friend invites you to a party. You...</h1>
<br />
<input id="red" type="radio" name="color" value="red">...bluntly tell your friend you have other priorities. <br/>
<input id="blue" type="radio" name="color" value="blue">...tell your friend you are finishing a coding assignment tonight. <br/>
<input id="yellow" type="radio" name="color" value="yellow">...hug your friend and start discussing the outfit. <br/>
<input id="green" type="radio" name="color" value="green">...thank your friend for inviting you, and tell her you look forward to it. <br/>
</form>
<button> Show me the color of my personality! </button>
<canvas id="canvas" width="300" height="300">
A picture of where your personality type fits in.
</canvas>
<p></p>