Как передать выбранный цвет (в форме) в функцию

@MneNеNado · Регистрация: 07.12.2018

Студворк — интернет-сервис помощи студентам

Задание:
По нажатию на кнопку "Показать" приложение должно открыть новое окно и показать в нем заказанные картинки с короткими подписями. Новое окно должно создаваться «на лету» с использованием информации, которую ввел в форму пользователь. Файл Форма.htm.

Так выглядит форма

Как передать выбранный цвет (в форме) в функцию

Код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
</head>
<body>
<script type="text/JavaScript">
 
[I][B]//Функция[/B][/I]
  function GO()
 
{
 
var sb=document.getElementById('sb');
var cv=document.getElementById('cv');
var bk=document.getElementById('bk');
var ns=document.getElementById('ns');
var p2=document.getElementById('k2');
var p3=document.getElementById('k3');
var pod=document.getElementById('zg');
var bg=document.getElementById('bg');
var bt=document.getElementById('bt');
var txt=pod.value;
if (sb.checked)
{
 st7="'sobaka.jpg'"
 
str="<body background="+bg.value+"><p>"+txt+"</p><img src="+st7+"/></body>";
}
if (cv.checked) 
{
 st7="'flover.jpg'"
 
str="<body background="+bg.value+"><p>"+txt+"</p><img src="+st7+"/></body>";
}
 
if (bk.checked) 
{
 st7="'buket.jpg'"
 
str="<body background="+bg.value+"><p>"+txt+"</p><img src="+st7+"/></body>";
}
 if (ns.checked) 
{
 st7="'nasos.jpg'"
 
str="<body background="+bg.value+"><p>"+txt+"</p><img src="+st7+"/></body>";
}
 
else {str="<body ><p>"+txt+"</p><img src="+st7+"/></body>";}
 
var win=window.open("","","width=500,height=450");
win.document.write(str);
win.document.close();
}
 
</script>
 
 
 
[B][I]//форма[/I][/B]
<form>
<h2>Страничка по заказу</h2>
<p> Заголовок:
        <input required type="text" id="zg" name="username" size="20"
        maxlength="30" />
        </p>
     <p>Картинка:
     <br>
     <input type="checkbox" name="kartinka" id ="sb" value="sobaka"
     checked="checked" /> Собака<br>
     <input type="checkbox" name="kartinka" id="cv" value="solo_flover" /> Одинокий цветок<br>
     <input type="checkbox" name="kartinka" id="bk" value="byket" /> Букет<br>
     <input type="checkbox" name="kartinka" id="ns" value="nasos"/> Насос<br>
     <p>Укажите цвет фона: <input type="color" name="сolor1" id="bg" value="#0000ff">
     <p>Укажите цвет текста: <input type="color" name="color2" id="bt" value="#ff0000">
     
         <p><input type="reset" value="Сброс">
         <input type="button" value="Показать" onclick="GO()"></p>
         
 
      
</form>
</body>
</html>

По заданию должно открываться новое окно с выбранной картинкой и заданным текстом(заголовок), и меняться цвет фона и цвет текста
Текст и картинка выводятся, а с изменением цвета проблема, что изменить что бы менялся цвет фона, и как сделать цвет текта

@kidASM · 24.12.2018, 23:42

Сообщение от MneNеNado

открываться новое окно с выбранной картинкой и заданным текстом

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-4">
                    <h2>Страничка по заказу</h2>
                    <form>
                        <div class="form-group">
                            <label for="title1">Заголово:</label>
                            <input type="text" class="form-control" id="title1" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="text1">Текст:</label>
                            <input type="text" class="form-control" id="text1" placeholder="">
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="pics" value="sobaka.jpg" checked>Собака
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="pics" value="flover.jpg">
                                Одинокий цветок
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="pics" value="buket.jpg">
                                Букет
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="pics" value="nasos.jpg">
                                Насос
                            </label>
                        </div>
                        <div class="form-group mt-2">
                            <label for="clrBackground">Укажите цвет фона:</label>
                            <input type="color" name="clrBackground" id="clrBackground" value="#0000ff">
                        </div>
                        <div class="form-group mt-2">
                            <label for="clrFont">Укажите цвет текста:</label>
                            <input type="color" name="clrFont" id="clrFont" value="#ff0000">
                        </div>
                        <button type="submit" id='btnReset' class="btn btn-warning mt-2 mr-2">Сброс</button>
                        <button type="submit" id='btnShow' class="btn btn-primary mt-2">Показать</button>
                    </form>
                </div>
            </div>
        </div>
        <script>
            var title = document.getElementById('title1');
            var text = document.getElementById('text1');
            var pics = document.getElementsByName('pics');
            var clrBackground = document.getElementById('clrBackground');
            var clrFont = document.getElementById('clrFont');
            var btnReset = document.getElementById('btnReset');
            var btnShow = document.getElementById('btnShow');
            var imgFile = "";
 
            if(title && text && pics && clrBackground && clrFont && btnReset && btnShow){
                for (var i=0; i<pics.length; i++) {
                    if (pics[i].checked) {
                        imgFile = pics[i].value;
                        break;
                    }
                }
                btnReset.addEventListener("click", function(event){
                    event.preventDefault();
                    title.value = "";
                    text.value = "";
                    clrBackground.value = "#0000ff";
                    clrFont.value = "#ff0000";
                    for (var i=0; i<pics.length; i++) {
                        if(i==0){
                            pics[i].checked = true;
                        }
                        else{
                            pics[i].checked = false;
                        }
                    }
                });
                btnShow.addEventListener("click", function(event){
                    event.preventDefault();
                    var html = "<body><p>"+text.value+"</p><img src="+imgFile+"></body>";
                    var win=window.open("","","width=500,height=450");
                    win.document.write(html);
                    win.document.close();
                    win._title = title.value;
                    win._bgColor = clrBackground.value;
                    win._color = clrFont.value;
                    win.onload = function(){
                        win.document.title = this._title;
                        win.document.body.style.background = this._bgColor;
                        win.document.body.style.color = this._color;
                    };
                });
            }
            else{
                console.log("Something wrong.");
            }
        </script>
    </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .