Как получить одну фигуру вместо двух?

При введении любых возможных значений (круг или квадрат, синий или зеленый или красный, и значения ширины и высоты) в promtp у меня вылезает всегда две фигуры. А Нужно что бы поседение два параметра (ширина и высота) применялись к одой фигуре. То есть я ввожу: квадрат, синий, 600, 800 - и появлялся один синий квадрат с сторонами 600 на 800

let figura = prompt('Какую фигуру вам нужно?', '');
let tsvet = prompt('Какого цвета вам нужно фигура?', '');
let razmer1 = prompt('Какая ширина будет у фигуры (в пикселях)?', '');
let razmer2 = prompt('Какая высота будет у фигуры (в пикселях)?', '');

if ((figura == 'круг') & (tsvet == 'красный')) document.write('<div2r style="width:' + razmer1 + 'px"></div2r>')
if ((figura == 'круг') & (tsvet == 'зеленый')) document.write('<div2g style="width:' + razmer1 + 'px"></div2b>')
if ((figura == 'круг') & (tsvet == 'синий')) document.write('<div2b style="width:' + razmer1 + 'px"></div2g>')

if ((figura == 'квадрат') & (tsvet == 'красный')) document.write('<div1r style="width:' + razmer1 + 'px"></div1r>')
if ((figura == 'квадрат') & (tsvet == 'зеленый')) document.write('<div1g style="width:' + razmer1 + 'px"></div1b>')
if ((figura == 'квадрат') & (tsvet == 'синий')) document.write('<div1b style="width:' + razmer1 + 'px"></div1g>')


if ((figura == 'круг') & (tsvet == 'красный')) document.write ('<div2r style="height:' + razmer2 + 'px"></div2r>')
if ((figura == 'круг') & (tsvet == 'зеленый')) document.write('<div2g style="height:' + razmer2 + 'px"></div2g>')
if ((figura == 'круг') & (tsvet == 'синий')) document.write('<div2b style="height:' + razmer2 + 'px"></div2b>')

if ((figura == 'квадрат') & (tsvet == 'красный')) document.write('<div1r style="height:' + razmer2 + 'px"></div1r>')
if ((figura == 'квадрат') & (tsvet == 'зеленый')) document.write('<div1g style="height:' + razmer2 + 'px"></div1g>')
if ((figura == 'квадрат') & (tsvet == 'синий')) document.write('<div1b style="height:' + razmer2 + 'px"></div1b>')
div1r{
width: 150px ;
height: 150px;
background-color: red;
float: left;
margin: 10px;
}
div1g{
width: 150px ;
height: 150px;
background-color: green;
float: left;
margin: 10px;
}
div1b{
width: 150px ;
height: 150px;
background-color: blue;
float: left;
margin: 10px;
}
div2r{
width: 150px ;
height: 150px;
background-color: red;
float: left;
margin: 10px;
border-radius: 100px;
}
div2g{
width: 150px ;
height: 150px;
background-color: green;
float: left;
margin: 10px;
border-radius: 100px;
}
div2b{
width: 150px ;
height: 150px;
background-color: blue;
float: left;
margin: 10px;
border-radius: 100px;
}
<html>
 <head> 
 <title>5111-61</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="Untitled-1.css" type="text/css" />
 </head>
 <body>
<script src="script.js"></script>
 </body>
 </html>

Ответы (1 шт):

Автор решения: Igor

У Вас "вылезает" не две, а четыре фигуры. Перенесите все prompt-ы в начало скрипта.

document.write('<div2r style="width:' + razmer1 + 'px;height:' + razmer2 + 'px;"></div2r>');
→ Ссылка