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

@АндрейСелифанов · Регистрация: 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, Вы правы, руки кривоваты слегка,не сработало из-за таблицы (я делал не через форму, а через таблицу), действительно работает, я бы сам даже не додумался сделать выбор положения линии проходом в цикле, ведь изменение размеров сработало - вот я и думал, что все остальное можно по такому же принципу реализовать, спасибо.

Новые блоги и статьи Все статьи Все блоги /
изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@АндрейСелифанов 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

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

Решение