поле и кнопка пропадают при нажатии

29 ноября 2021, 22:40

как сделать чтобы хекс код и сам цвет отображались под полем после нажатия?после нажатия поле и кнопка пропадают

function myFunction() {  
	var x =  document.getElementById("myText").value; 
	document.getElementById("demo").innerHTML = x; 
	switch (x) { 
	case "red": 
		document.write("#FF0000" + "<div style='width:100px;height:50px;background:red'></div>"); 
		break; 
	case "RED": 
		document.write("#FF0000" + "<div style='width:100px;height:50px;background:red'></div>"); 
		break; 
	case "black": 
		document.write("#000000" + "<div style='width:100px;height:50px;background:black'></div>"); 
		break; 
	case "BLACK": 
		document.write("#000000" + "<div style='width:100px;height:50px;background:black'></div>"); 
		break; 
	case "pink": 
		document.write("#FFC0CB" + "<div style='width:100px;height:50px;background:pink'></div>"); 
		break; 
	case "PINK": 
		document.write("#FFC0CB" + "<div style='width:100px;height:50px;background:pink'></div>"); 
		break; 
	case "yellow": 
		document.write("#FFFF00") + "<div style='width:100px;height:50px;background:yellow'></div>"; 
		break; 
	case "YELLOW": 
		document.write("#FFFF00") + "<div style='width:100px;height:50px;background:yellow'></div>"; 
		break; 
	default: 
		document.write("please insert a color name"); 
 
} 
        }

<!doctype html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
	<link rel="stylesheet" href="style2.css"> 
    <title>Hello, world!</title> 
  </head> 
  <body> 
  	<!DOCTYPE html> 
<html> 
<body> 
    <input type="text" id="myText"> 
    <button type="button" onclick="myFunction()">  
		Try  it  
  </button>  
    <p id="demo"></p>  
 
    <script src="script.js"></script> 
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
  </body> 
</html>

Answer 1

Можно решить таким способом. Но вообще, есть алгоритмы, которые преобразуют rgb в hex. С ними вы сможете вывести hex значения любого цвета без хардкода.

function myFunction() { 
  const colors = { 
    red: '#FF0000', 
    black: '#000000', 
    pink: '#FFC0CB', 
    yellow: 'yellow' 
  }; 
  const x = document.getElementById("myText").value.toLowerCase(); 
  const demo = document.getElementById("demo"); 
  if (colors[x]) { 
    demo.innerHTML = colors[x] + "<div style='width:100px;height:50px;background:" + x + "'></div>"; 
  } else { 
    demo.innerHTML = "please insert a color name"; 
  } 
}

<input type="text" id="myText"> 
<button type="button" onclick="myFunction()">Try  it</button> 
<p id="demo"></p>

Answer 2

          function myFunction() { 
  var x =  document.getElementById("myText").value;


  switch (x) {
  case "red":
    document.getElementById("demo").innerHTML = ("#FF0000" + "<div style='width:100px;height:50px;background:red'></div>");
    break;
  case "RED":
    document.getElementById("demo").innerHTML =("#FF0000" + "<div style='width:100px;height:50px;background:red'></div>");
    break;
  case "black":
    document.getElementById("demo").innerHTML =("#000000" + "<div style='width:100px;height:50px;background:black'></div>");
    break;
  case "BLACK":
    document.getElementById("demo").innerHTML =("#000000" + "<div style='width:100px;height:50px;background:black'></div>");
    break;
  case "pink":
    document.getElementById("demo").innerHTML =("#FFC0CB" + "<div style='width:100px;height:50px;background:pink'></div>");
    break;
  case "PINK":
    document.getElementById("demo").innerHTML =("#FFC0CB" + "<div style='width:100px;height:50px;background:pink'></div>");
    break;
  case "yellow":
    document.getElementById("demo").innerHTML =("#FFFF00") + "<div style='width:100px;height:50px;background:yellow'></div>";
    break;
  case "YELLOW":
    document.getElementById("demo").innerHTML =("#FFFF00") + "<div style='width:100px;height:50px;background:yellow'></div>";
    break;
  default:
    document.getElementById("demo").innerHTML =("please insert a color name");
}
        }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как настроить radiobutton в html?

https://robocodeucoz

181

HTML

Что такое for в bootstrap 4, type, id =""

Изучаю bootstrap 4 Есть несколько строк:

148

Java

Валидация сертифика на WebLogic

как реализовать проверку клиентского сертификата по ssl_client_s_dn_cn на weblogic? можно ли это сделать через интерфейс админки?

203

Java

На чём можно написать графический интерфейс desktop приложения на Java

Кроме стандартной swing, в Java ранее была библиотека JavaFX, которую убрали в последних версияхПоэтому хотел бы спросить как сейчас создают интерфейс...

180