Передача значение переменной из JS в HTML

@Sed_Lex · Регистрация: 12.09.2011

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

Можно ли передать значение переменной из JS в HTML?

Пример:

JavaScript
1
2
3
4
5
6
7
8
function a()
{
var str1='none';
}
function b()
{
var str2='block'
}

а в HTML:

HTML5
1
<div style="display:???????"></div>

Только чтобы вместо знаков вопроса можно было вставить значение переменной.

Реализуемо ли такое?

@Vicont · 05.10.2011, 16:06

JavaScript взаимодействует с HTML через объектную модель документа (DOM), поэтому не может "обмениваться" данными "напрямую" c HTML в коде HTML тем способом что Вы предложили.

То, что Вы хотите реализовать делается вот так:

JavaScript
1
2
3
4
5
6
7
8
9
function a()
{
  var str;
  if ('условие')
    str = 'none'
  else
    str='block';
  document.getElementsByTagName('div')[0].style.display = str;
}

HTML5
1
<div></div>

А тем методом, что Вы предложили, можно воспользоваться прибегая к PHP:

PHP
1
2
3
4
5
6
7
8
9
<?php
function a(){
  $str='none';
}
function b(){
 $str='block'
}
b();
?>

HTML5
1
<div style="display:<?=$str?>"></div>

@Sed_Lex · 05.10.2011, 21:15 **[ТС]**

Спасибо за разъяснение

Добавлено через 3 часа 26 минут
Решение немного переработал и вот что получилось:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
     function b() {
         var str1;
         str1='none';
        
         document.getElementsByTagName('h3')[0].style.display=str1;
     }
     function a() {
         var str;
                    
             str = 'block';
         document.getElementsByTagName('h3')[0].style.display = str;
     }
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <div id="menu">
    <a href="aboutus.htm" class="button"><span>О нас</span></a>
    <a href="vakans.htm" class="button"><span>Вакансии</span></a>
 
<div id="menu2" onmouseout="b();this.className='men3'" onmouseover="a();this.className='men2'">
    
        <a href="#" class="button"><span>Документы</span></a>
            <h3>
            <div class="menu3" style="margin-left:30px" > <a href="docs.htm" class="button1" ><span>Открытие фирмы в Польше</span></a>
                <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Оформление шенген виз</span></a>
                    <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Трудоустройство в Польше</span></a>
                         <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Юридическая поддержка в Польше</span></a>
                         </div>
                    </div>
                </div>
            </div>
            </h3>
    
    </div>
</div>

стили

CSS
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
#menu2
    {
        position:relative;
        float:left;
      
        }
    .men2
    {
     
    
       height: 100px;
    }
    .men3
    {
        
    }
    
        .menu3
    {
        display: block;
        position:absolute;
        top:55px;
        z-index: 0;
        margin-right:5px;
        text-align:center;
 
             
    }
    h3
    {
     
        padding:0 0 0 0;
        font: 14pt normal;
        
        
    }

Теперь выпадающая менюшка работает.

Но, изначально, при заходе на страницу выпадающая менюшка "висит" открытой.
Когда наведешь на пункт меню и убершь курсор - менюшка исчезнет и нормально все работает.

Получается, что по умолчанию у меня идет display:block, несмотря на то, что onmouseout настроено на display:none.

Подскажите, пожалуйста, что подправить надо )

@Vicont · 05.10.2011, 23:20

Для того чтобы ваше выпадающее меню было поумолчанию скрыто пропишите заголовку h3 стиль:

HTML5
1
<h3 style='display: none;'>

P.S.

Рекомендации:

1) JavaScript
- Имена функций должны "говорить" для чего эта функция предназначена, имена a и b ни о чем ни говорят;

- Функции содержат лишний код:

JavaScript
1
2
3
4
5
6
7
8
9
10
function b() {
  var str1;
  str1='none';
  document.getElementsByTagName('h3')[0].style.display=str1;
}
function a() {
  var str;
  str = 'block';
  document.getElementsByTagName('h3')[0].style.display = str;
}

Оптимизированные функции:

JavaScript
1
2
3
4
5
6
function b() {
   document.getElementsByTagName('h3')[0].style.display='none';
}
function a() {
  document.getElementsByTagName('h3')[0].style.display = 'block';
}

Две функции излишне, лучше использовать одну и передавать ей параметр:

JavaScript
1
2
3
function changeDisplay(val){
   document.getElementsByTagName('h3')[0].style.display = val;
}

HTML5
1
<div id="menu2" onmouseout="changeDisplay('none')" onmouseover="changeDisplay('block')">

2) HTML
- Излишне вставлять текст ссылки в тег span:

HTML5
1
<a href="docs.htm" class="button1" ><span>Открытие фирмы в Польше</span></a>

Так правильней:

HTML5
1
<a href="docs.htm" class="button1" >Открытие фирмы в Польше</a>

3) CSS
- Когда оформляете сообщение на форуме, используйте "код CSS" а не "HTML"

@Sed_Lex · 05.10.2011, 23:51 **[ТС]**

Респект и уважуха )

Спасибо большое за помощь, работает.

И спасибо за рекомендации - учту на будущее.

З.Ы. По поводу span - у меня этот тэг применяется в кнопочках, я просто не весь код выкладывал.

CSS
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
 .button1
    {
        display:block;
        color: White;
        background: url(button-r3.jpg);
        background-position: top right;
        background-repeat:no-repeat;
        width: 250px;
        padding-right:14px;
        float:left;
        outline:none;
        text-decoration:none;
        font-size:14px; 
        border:5px double white; 
       
         
    }
      .button1 span
      {
          display: block;
          line-height: 10px;
          background:url(button-l3.jpg);
          background-repeat:no-repeat;
          padding: 20px 0 20px 14px;
      }
      .button1:hover
      {
          background-position:100% -50px;
      }
      .button1:hover span
      {
          background-position: 0% -50px;
      }

Добавлено через 4 минуты
З.Ы.Ы. Если кому интересно, то сайт тут. Еще не всё заполнено, поэтому некоторые разделы отображают не то, что должны...

@koldungsm · 23.01.2017, 01:37

Подскажите пожалуйста как с помощью переменных можно сократить данный код:

JavaScript
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
$(".v1").click(function () {
        $("div.box").html("<img src='img/zal/color-big/1/1.png'>");
        $("div.material").html("Материал 1");
        $("div.view").html("<a href='img/zal/texturi/1/1.png' class='fancybox' rel='textura' target='_blank' title='Материал 1'><span class='icon-view'></span></a>");
    });
    $(".v2").click(function () {
        $("div.box").html("<img src='img/zal/color-big/1/2.png'>");
        $("div.material").html("Материал 2");
        $("div.view").html("<a href='img/zal/texturi/1/2.png' class='fancybox' rel='textura' target='_blank' title='Материал 2'><span class='icon-view'></span></a>");
    });
    $(".v3").click(function () {
        $("div.box").html("<img src='img/zal/color-big/1/3.png'>");
        $("div.material").html("Материал 3");
        $("div.view").html("<a href='img/zal/texturi/1/3.png' class='fancybox' rel='textura' target='_blank' title='Материал 3'><span class='icon-view'></span></a>");
    });
    $(".v4").click(function () {
        $("div.box").html("<img src='img/zal/color-big/1/4.png'>");
        $("div.material").html("Материал 4");
        $("div.view").html("<a href='img/zal/texturi/1/4.png' class='fancybox' rel='textura' target='_blank' title='Материал 4'><span class='icon-view'></span></a>");
    });
    $(".v5").click(function () {
        $("div.box").html("<img src='img/zal/color-big/1/5.png'>");
        $("div.material").html("Материал 5");
        $("div.view").html("<a href='img/zal/texturi/1/5.png' class='fancybox' rel='textura' target='_blank' title='Материал 5'><span class='icon-view'></span></a>");
    });

@Balanaar · 23.01.2017, 09:40

Вы просто нашли случайную тему и впихнули туда свой вопрос? Создали бы новую...

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

как с помощью переменных можно сократить данный код

Про циклы почитайте.

JavaScript
1
2
3
4
5
6
for (var i = 1; i <= 5; i++)
  $(".v"+i).click(function () {
    $("div.box").html("<img src='img/zal/color-big/1/"+i+".png'>");
    $("div.material").html("Материал "+i);
    $("div.view").html("<a href='img/zal/texturi/1/"+i+".png' class='fancybox' rel='textura' target='_blank' title='Материал "+i+"'><span class='icon-view'></span></a>");
  });

@koldungsm · 23.01.2017, 16:19

Спасибо конечно, но это не то.
По вашему то правильно. Вы написали то, что увидели.
Вы конечно сократили код, но не поняв принцип.
Названия не обязательно должны быть Материал 1, Материал 2, поэтому за шаблон это взять не правильно!
Переменные нужны были для html кода что бы не дублировать его сто раз.
Идентификаторы у картинок и их названия не обязательно должны быть по порядку.
Решение так то я уже сам написал, но буду благодарен за ваш вариант, если предложите лучше моего.
Спасибо!

Добавлено через 24 минуты
Вот мой вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
/* Текстуры и Атрибуты ссылок */
    var v1la = "img/zal/color-big/1/";
    var v1l = "img/zal/texturi/1/";
    var v1atr = "class='fancybox' rel='textura'><span class='icon-view'></span>";
    /* Материалы 1го Варианта */
    $(".v1").click(function () {
        $("div.box").html('<img src="'+v1la+'1.png">');
        $("div.material").html("Материал 1");
        $(".view").html('<a href="'+v1l+'1.png" '+v1atr+'</a>');
    });

@Balanaar · 23.01.2017, 16:31

Это вы так сократили код?

@koldungsm · 23.01.2017, 17:13

Я же написал, если сможете лучше сделать, то буду очень вам признателен.
А что? Не сократил?
Только имейте ввиду что класс .v1 в цикл ставить нельзя, потому что они будут меняться постоянно и идут не по порядку

@Balanaar · 23.01.2017, 17:26

Изначально задача звучала так:

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

как с помощью переменных можно сократить данный код

Задача была решена.
Затем выясняется, что у вас там куча всяких странностей оказывается происходит, причём всё очень абстрактно. Никакой конкретики.

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

Названия не обязательно должны быть Материал 1, Материал 2

По какому принципу формируется перечень наименований? Они статичны / запрашиваются из БД / запрашиваются со стороннего сервиса с помощью API / другое?

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

Идентификаторы у картинок и их названия не обязательно должны быть по порядку

По какому принципу картинкам присваиваются идентификаторы и порядок сортировки? Варианты выше.

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

класс .v1 в цикл ставить нельзя, потому что они будут меняться постоянно и идут не по порядку

Аналогичный вопрос.
Как мы можем вам помочь, если вы проблему/задачу не сформулировали?

@koldungsm · 23.01.2017, 17:35

На данный момент код просто надо оптимизировать, то есть грамотно сократить.
Данные ни откуда не берутся, пока всё вносится вручную в один файл.
Прошу прощения что не конкретизировал пост изначально, думал и так всё будет ясно.
На данный момент код таков:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Текстуры и Атрибуты ссылок */
    var v1la = "img/zal/color-big/1/";
    var v1l = "img/zal/texturi/1/";
    var v1atr = "class='fancybox' rel='textura'><span class='icon-view'></span>";
    /* Материалы 1го Варианта */
    $(".v1").click(function () {
        $("div.box").html('<img src="'+v1la+'1.png">');
        $("div.material").html("Белый");
        $(".view").html('<a href="'+v1l+'1.png" '+v1atr+'</a>');
    });
    $(".v2").click(function () {
        $("div.box").html('<img src="'+v1la+'2.png">');
        $("div.material").html("Жёлтый");
        $(".view").html('<a href="'+v1l+'2.png" '+v1atr+'</a>');
    });
    $(".v3").click(function () {
        $("div.box").html('<img src="'+v1la+'3.png">');
        $("div.material").html("Красный");
        $(".view").html('<a href="'+v1l+'3.png" '+v1atr+'</a>');
    });
и т.д.

класс .v1, v2 ... в цикл как вот поставить если названия разные у картинок будут?
Если можете сделать код ещё меньше - буду очень рад за помощь!

@Balanaar · 23.01.2017, 17:48

Вы осознаёте, что на самом деле только усложнили код?

Если вы вшиваете в исходники все данные, то создайте JS-объект (или в крайнем случае массив), в который вы будете заносить данные, а разметку формируйте в цикле. Например:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Массив с данными */
var data = [
    {class: 'v1', img: '1.png', material: 'Белый'},
    {class: 'v2', img: '2.png', material: 'Жёлтый'},
    {class: 'v3', img: '3.png', material: 'Красный'},
    // и т.д.
];
/* Цикл, формирующий обработчики клика на основании массива данных */
for (var i = 0; i < data.length; i++)
    $("."+data[i].class).click(function () {
        $("div.box").html('<img src="img/zal/color-big/1/'+data[i].img+'">');
        $("div.material").html(data[i].material);
        $(".view").html('<a href="img/zal/texturi/1/'+data[i].img+'" class="fancybox" rel="textura"><span class="icon-view"></span></a>');
    });

Никаких больше строк не нужно

@koldungsm · 23.01.2017, 18:01

Я с Ява скрипт пока не тесно работаю, только начинаю вникать, поэтому строго не судите

Можно сказать делаю пальцем тыча в небо.
У меня спецификация по html вёрстке основная.
За ответ спасибо, сейчас буду пробовать!

Добавлено через 8 минут
Подскажите пожалуйста, а как быть то дальше?
Дальше папки меняются, а в цикле как добавить?

JavaScript
1
2
3
4
5
6
7
8
9
/* Материалы 2го Варианта */
    $(".v151").click(function () {
        $("div.box").html("<img src='img/zal/color-big/2/1.png'>");
        $("div.material").html("Материал 1");
    });
    $(".v152").click(function () {
        $("div.box").html("<img src='img/zal/color-big/2/2.png'>");
        $("div.material").html("Материал 2");
    });

@koldungsm · 23.01.2017, 18:32

Почему то ваш код не хочет работать, возможно из-за какой то синтаксической ошибки.
Можете посмотреть?
Ваш код со 101 строки.
В редакторе подсказка: Expected '{' and instead saw '$'.

@koldungsm · 23.01.2017, 19:23

Я сам не разбираюсь, можете подправить код, потому что так не работает?

@Balanaar · 23.01.2017, 22:36

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Массив с данными */
var data = [
    {class: 'v1', img: '1.png', material: 'Белый'},
    {class: 'v2', img: '2.png', material: 'Жёлтый'},
    {class: 'v3', img: '3.png', material: 'Красный'},
    // и т.д.
];
/* Цикл, формирующий обработчики клика на основании массива данных */
for (var i = 0; i < data.length; i++) {
    $("."+data[i].class).click(function () {
        $("div.box").html('<img src="img/zal/color-big/1/'+data[i].img+'">');
        $("div.material").html(data[i].material);
        $(".view").html('<a href="img/zal/texturi/1/'+data[i].img+'" class="fancybox" rel="textura"><span class="icon-view"></span></a>');
    });
}

@koldungsm · 23.01.2017, 22:58

Так тоже не работает.
Пишет Don't make functions within a loop

@Balanaar · 23.01.2017, 23:45

Это предупреждение. Его можно игнорировать. Либо вынесите функцию из цикла

@koldungsm · 23.01.2017, 23:47

Ну вот знал бы как вынести к вам не обращался бы.
Я в яве вообще пока новичок.
Помогите пожалуйста!

Новые блоги и статьи Все статьи Все блоги /
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/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	23.01.2017, 16:31
	Это вы так сократили код? 0

@koldungsm 0 / 0 / 0 Регистрация: 17.02.2013 Сообщений: 17
	23.01.2017, 17:13
	Я же написал, если сможете лучше сделать, то буду очень вам признателен. А что? Не сократил? Только имейте ввиду что класс .v1 в цикл ставить нельзя, потому что они будут меняться постоянно и идут не по порядку 0

@koldungsm 0 / 0 / 0 Регистрация: 17.02.2013 Сообщений: 17
	23.01.2017, 19:23
	Я сам не разбираюсь, можете подправить код, потому что так не работает? Миниатюры 0

@koldungsm 0 / 0 / 0 Регистрация: 17.02.2013 Сообщений: 17
	23.01.2017, 22:58
	Так тоже не работает. Пишет Don't make functions within a loop 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	23.01.2017, 23:45
	Это предупреждение. Его можно игнорировать. Либо вынесите функцию из цикла 0

@koldungsm 0 / 0 / 0 Регистрация: 17.02.2013 Сообщений: 17
	23.01.2017, 23:47
	Ну вот знал бы как вынести к вам не обращался бы. Я в яве вообще пока новичок. Помогите пожалуйста! 0