Динамическое изменение объекта при изменении параметров

@АндрейСелифанов · Регистрация: 23.11.2014

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

Есть линия - тег <hr>, есть параметры, организованные через теги <input> и <select>, при помощи JavaScript нужно сделать так, чтобы изменение параметров влияло на параметры тега <hr>. Необходимые параметры для изменения - положение, размер, и цвет линии. У меня получилось оформить только изменение размера, никак не могу изменить положение и цвет.

HTML5
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
<HTML>
<HEAD><TITLE>HR</TITLE></HEAD>
<BODY>
<h2>Horizontal Lines</h2>
Please choose values of the params, thouse 
needed to be change, and push the <b>EXEQUE</b> button
<hr width=300 size=10 color=green id="line" align=left>
    
<TABLE border= 1 cellpadding=10>
    <tr><td>Выравнивание<br> 
            <input type="radio" name="r1" id="rd1" value="left" checked>LEFT<br>
            <input type="radio" name="r1" id="rd2" value="center">CENTER<br>
            <input type="radio" name="r1" id="rd3" value="right">RIGHT<br>
            <input type=text value="250" id="w" style=width:50> Line's height<br>
            <input type=text value="10" id="h" style=width:50> Line's width<br></td>
        <td>Line's color<br>
            <select name="sel" id="s">
            <option id="c1" value="green">Green
            <option id="c2" value="red" selected>Red
            <option id="c3" value="yellow">Yellow
            <option id="c4" value="blue">Blue
            <option id="c5" value="black">Black
            </select></td></tr>
</TABLE> <br>
<input type=button value="EXEQUE" id="exe" onclick="f1()">
<input type=button value="DROP" id="dr">
</BODY>
    <script>
    function f1()
    {
        var ll= document.getElementById('line');
    var rr1= document.getElementById('rd1');
    var rr2= document.getElementById('rd2');
    var rr3= document.getElementById('rd3');
    var ww= document.getElementById('w');
    var hh= document.getElementById('h');
    var cc1= document.getElementById('c1');
    var s1= document.getElementById('green');
        (ll.width=ww.value)
        (ll.size=hh.value)
         if (rr1.checked) ll.align=left;
    if (rr2.checked) ll.align=center;
    if (rr3.checked) ll.align=right;
    if (cc1.checked) alert("selected");/*можно ли выцепить объект select (id="s") и проверить какое значение (value из option) он принимает в данный момент?*/
    }
    </script>
</HTML>

Что нужно подкорректировать в Java-Script-коде, чтобы он стал функциональным?Помогите, кто знает, пожалуйста.

@kalabuni · 18.10.2015, 14:18

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myFunc (F)
{
var obj = document.getElementById ('line');
 
for (var j = 0, rdi = document.getElementsByName ('align'), J = rdi.length; j < J; j++)
   if (rdi [j].checked){obj.align = rdi [j].nextSibling.nodeValue; break} 
 
with (F.color) obj.color = options [selectedIndex].text;
 
var S = parseInt (F.size.value);
if (S != F.size.value || F.size.value < 0) {alert ('The value of the field "Size" must be a non-negative integer'); return}
obj.size = S;
 
var W = parseInt (F.width.value);
if (W != F.width.value || F.width.value < 0) {alert ('The value of the field "Width" must be a non-negative integer'); return}
obj.width = W;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<hr id="line" width="300" size="10" color="gray" align="left">
 
<form style="padding: 16px; margin-top: 12px; border: 2px solid black">
<p><label><input type="radio" name="align" checked>left</label><br>
   <label><input type="radio" name="align">center</label><br>
   <label><input type="radio" name="align">right</label><br>
 
<p>Color: <select name="color">
                 <option>gray</option>
                 <option>red</option>
                 <option>orange</option>
                 <option>yellow</option>
                 <option>green</option>
                 <option>aqua</option>
                 <option>blue</option>
                 <option>violet</option></select>
 
<p>Size: <input name="size" size="6" value="10"> px
 
<p>Width:<input name="width" size="6" value="300"> px
 
<p><input type="button" value="EXEQUE" onclick="myFunc (this.form)">
</form>

@АндрейСелифанов · 19.10.2015, 14:30 **[ТС]**

это не сработало, пробовал сделать по Вашей логике - ничего не вышло

@kalabuni · 19.10.2015, 14:55

Сообщение от АндрейСелифанов

это не сработало, пробовал сделать по Вашей логике - ничего не вышло

ничего не понял

я вам не "логику" дал -- я выложил здесь полностью готовый рабочий код

мой код, как он есть, у вас не работает?

где же вас, таких криворуких, делают?

@arcmag · 19.10.2015, 15:15

Ну вот можно вот так вот попробовать...

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
<html>
<head>
<script>
window.addEventListener("load", function () {
    var q  = document.querySelectorAll ("[data-info]"),
        hr = document.getElementById("myline");
    for (var i = 0, len = q.length; i < len; i++) {
        q[i].addEventListener("change", function () {
            hr.setAttribute (this.dataset["info"],  this.value);
        });
    }
})
</script>
</head>
<body>
        <form>
            <table style="text-align: center">
                <tr>
                    <td colspan="4">Размеры</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td><input data-info="width" type="number" value="500"></td>
                    <td>size</td>
                    <td><input data-info="size" type="number" value="10"></td>
                </tr>
                <tr>
                    <td colspan="4">Положение</td>
                </tr>
                <tr>
                    <td>
                        <select data-info="alight">
                            <option>left</option>
                            <option>center</option>
                            <option>right</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">Цвет</td>
                    <td colspan="2"><input data-info="color" type="color"></td>
                </tr>
            </table>
        </form>
        <hr width="500" size="10" id="myline" />
</body>
</html>

@АндрейСелифанов · 19.10.2015, 18:34 **[ТС]**

arcmag, спасибо, что откликнулись (в целом Ваш вариант работает, выбор цвета через селектор интересная идея), kalabuni, Вы правы, руки кривоваты слегка,не сработало из-за таблицы (я делал не через форму, а через таблицу), действительно работает, я бы сам даже не додумался сделать выбор положения линии проходом в цикле, ведь изменение размеров сработало - вот я и думал, что все остальное можно по такому же принципу реализовать, спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@АндрейСелифанов 0 / 0 / 0 Регистрация: 23.11.2014 Сообщений: 73
	19.10.2015, 14:30 [ТС]
	это не сработало, пробовал сделать по Вашей логике - ничего не вышло 0

@АндрейСелифанов 0 / 0 / 0 Регистрация: 23.11.2014 Сообщений: 73
	19.10.2015, 18:34 [ТС]
	arcmag, спасибо, что откликнулись (в целом Ваш вариант работает, выбор цвета через селектор интересная идея), kalabuni, Вы правы, руки кривоваты слегка,не сработало из-за таблицы (я делал не через форму, а через таблицу), действительно работает, я бы сам даже не додумался сделать выбор положения линии проходом в цикле, ведь изменение размеров сработало - вот я и думал, что все остальное можно по такому же принципу реализовать, спасибо. 0

Динамическое изменение объекта при изменении параметров

Решение