Форум

denis_alekss · #1 (**permalink**) 07.12.2020, 15:02

Задача такая, при нажатии на одну из 3 кнопок должны вывестись надпись
Эй [Имя] Вы выбрали [цвет на русском] цвет и должен поменяться цвет фона.

document.write("Эй, " + rez + " Вы выбрали "+color + " цвет");

Цвет фона меняется, но вывод надписи на экран не происходит.Как сократить в операторе Switch код?

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая страничка</title>

 </head>
 <body>
<p>Выбрать цвет фона</p>
<FORM>
 <INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>
  <SCRIPT LANGUAGE="JavaScript">


function newcolor(color){
	var rez = prompt("Пожалуйста введите свое имя...","Имя");
	document.bgColor=color;
	switch(color){
	case color == 'lightblue': color = 'Светло-голубой'; 
	document.write("Эй, " + rez + " Вы выбрали "+color + " цвет");
	break;
	case color == 'pink': color = 'розовый'; 
	document.write("Эй, " + rez + " Вы выбрали "+color + " цвет");
	break;
	case color == 'white': color = 'белый'; 
	document.write("Эй, " + rez + " Вы выбрали "+color + " цвет");
	break;
 }
}

</SCRIPT>
 </body>
</html>

рони · #2 (**permalink**) 07.12.2020, 15:17

Сообщение от denis_alekss

но вывод надписи на экран не происходит.

не используйте document.write -- а выводите текст в какой-то блок.

voraa · #3 (**permalink**) 07.12.2020, 15:35

Сообщение от denis_alekss

Как сократить в операторе Switch код?

Его не сокращать, а переписывать надо
https://learn.javascript.ru/switch

denis_alekss · #4 (**permalink**) 07.12.2020, 15:51

Переписал так, но цвет фона не меняется почему-то

Код:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая страничка</title>

 </head>
 <body>

<p>Выбрать цвет фона</p>
<FORM>
 <INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>


  <SCRIPT LANGUAGE="JavaScript">
function newcolor(color){
	var rez = prompt("Пожалуйста введите свое имя...","Имя");
	
switch(color){
    case 'lightblue':
        color = 'Светло-голубой'; 
	break;

    case 'pink':
        color = 'розовый'; 
break;

    case 'white':
        color = 'белый'; 
	break;
 }
    document.bgColor=color;
	document.write("Эй, " + rez + " Вы выбрали "+color + " цвет");
 }


</SCRIPT>
 </body>
</html>

рони · #5 (**permalink**) 07.12.2020, 15:58

Сообщение от denis_alekss

Переписал

ваша фантазия безгранична, сходите по ссылке, которую вам дали выше и посмотрите, как пишется switch

voraa · #6 (**permalink**) 07.12.2020, 16:38

Сообщение от denis_alekss

Переписал так, но цвет фона не меняется почему-то

Уберите и никогда не используйте document.write
Он еще что то может вывести во время парсинга страницы. Но это плохо, т.к. может помешать и замедлить парсинг.
А во время работы страницы он полностью переписывает весь документ, что у вас и происходит.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая страничка</title>

 </head>
 <body>

<p>Выбрать цвет фона</p>
<FORM>
 <INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>
<div id="out"></div>


  <SCRIPT LANGUAGE="JavaScript">
function newcolor(color){
	var rez = prompt("Пожалуйста введите свое имя...","Имя");
        var rcolor;
	
switch(color){
    case 'lightblue':
        rcolor = 'Светло-голубой'; 
	break;

    case 'pink':
        rcolor = 'розовый'; 
break;

    case 'white':
       rcolor = 'белый'; 
	break;
 }
    document.bgColor=color;
    document.getElementById('out').innerHTML = "Эй, " + rez + " Вы выбрали "+rcolor + " цвет";
 }


</SCRIPT>
 </body>
</html>

рони · #7 (**permalink**) 07.12.2020, 16:40

denis_alekss,
https://learn.javascript.ru/modifyin...e-soobscheniya

denis_alekss · #8 (**permalink**) 08.12.2020, 13:54

Вот так сработало.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Тестовая страничка</title>
 
    <SCRIPT type="text/JavaScript">
function newcolor(color){
    var rez = prompt("ПAжалуйста введите свое имя...","Имя");
    var color1 = "";
switch(color){
    case 'lightblue':
        color1 = 'Светло-голубой';
    break;
    case 'pink':
        color1 = 'розовый';
    break;
    case 'white':
        color1 = 'белый';
    break;
}
    document.write("Эй, " + rez + ", Вы выбрали "+color1 + " цвет");
    document.bgColor=color;
}
</SCRIPT>
</head>
<body>

<p>Выбрать цвет фона</p>
<FORM>
<INPUT TYPE="button" VALUE="Голубой"
      onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
      onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
      onClick="newcolor('white')">
</FORM>

</body>
</html>

Я понял свою ошибку, спасибо, то есть нужно было создавать еще одну переменную color1
а я присвоил получается значение переменной color в switch русский текст, а затем пытался присвоить русский текст bgColor

denis_alekss · #9 (**permalink**) 08.12.2020, 14:04

voraa, значит все-таки использовать контейнер div или абзац p, в него вставлять идентификатор id и использовать метод getElementById чтобы сослаться и вывести результат..

рони · #10 (**permalink**) 08.12.2020, 14:06

denis_alekss,
~~а не создавая новую страницу, сможешь?~~ уже voraa, пост #6.

Форум

Справочник

Discord чат

Курсы javascript