Я провел личный тест на HTML-странице, используя JavaScript.По сути, пользователь выбирает ответ на вопрос, и абзац под ним изменяет содержимое, и в цветной сетке появляется черная точка (которую я создал с помощью элемента canvas) для обозначения вашего индивидуального цвета.
Сначала кажется, что все работает довольно хорошо.Проблема в том, что если вы сделали это один раз и хотите сделать это снова, вы не можете просто выбрать один из других ответов и нажать зеленую кнопку.Теперь две цветные точки появятся в цветной сетке.Кто-нибудь знает, как я могу решить эту проблему в моем коде 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>