Передача значение переменной из 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

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

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию 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-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@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