Форум

-=Женька=- · #1 (**permalink**) 06.06.2015, 07:29

Добрый день !
Вообщем такая проблема.Недавно начал учить потихоньку js
Вопрос такой как сделать что-бы в Result выводилась та переменная на которую я нажму на сайте

function calc () {
    var moneyR1 = document.getElementById('moneyR1').value;
    var moneyR2 = document.getElementById('moneyR1').value;
    var Result = document.getElementById('Result').innerHTML = moneyR1 && moneyR2;

}
calc()

рони · #2 (**permalink**) 06.06.2015, 09:35

Сообщение от -=Женька=-

выводилась та переменная на которую я нажму

это неправильное сочетание слов и ваши переменные имеют один источник -- поставьте в клик на нужное вам

function click () {
 document.getElementById('Result').innerHTML = this.value;

}

-=Женька=- · #3 (**permalink**) 06.06.2015, 21:19

Можно пожалуйста чуть подробней

рони · #4 (**permalink**) 06.06.2015, 21:42

-=Женька=-,
где код?

-=Женька=- · #5 (**permalink**) 07.06.2015, 06:35

/*Общая сумма*/
function click () {
    document.getElementById('Result').innerHTML = this.value;

}
click()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Амата Новый стиль</title>
<link rel="stylesheet" href="main.css">
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({ pagerCustom: '#bx-pager'});
});
 </script>
<div id="main">
 <div class="image-doors" style="float:left">
  <ul class="bxslider">
  <li><img src="img/ash-doors+r1.jpg" /></li>
  <li><img src="img/Gold-alder+r1.jpg" /></li>
  <li><img src="img/wenge-doors+r1.jpg" /></li>
  <li><img src="img/chestnut-doors+r1.jpg" /></li>
</ul></div>
 <div class="option">
  <form>
   
   <div id="bx-pager"><br>
<ul class="colors">
<li id="moneyR1" value="1599"><div><a  href="" data-slide-index="0" title="Ясень R1">
     <img src="img/ash.png" alt="Ясень" width="63" height="63"><br>Ясень R1</a></div></li>

 <li id="moneyR2" value="15959" onclick="click()"><div><a href="" data-slide-index="1" title="Золотая ольха"><img src="img/Gold-alder.png" alt="Золотая ольха" width="63" height="63"><br>Золотая ольха R1</a></div></li>
 
<li><div><a href="" data-slide-index="2" title="Венге"><img src="img/wenge.png" alt="Венге" width="63" height="63"><br>Венге R1</a></div></li>
 
<li><div><a href="" data-slide-index="3" title="Каштан"><img src="img/chestnut.png" alt="Каштан" width="63" height="63"><br>Каштан R1</a></div></li>
</ul>

   <fieldset>
		<legend>Размеры двери</legend>
<table>
   <td>
 <th><label>Высота</label></th>
 <th>
2000 мм
 </th>
 </td>
   <td>
   <th><label>Ширина</label></th>
   <th>
 <select>
  <option>600 мм</option>
  <option>700 мм</option>
  <option>800 мм</option>
  <option>900 мм</option>
</select>
 </th>
   </td>
</table>
	</fieldset>
 
  </form>
 <div>
 <p>Сумма : <b id="Result"></b><i> гривен</i></p>
 </div>
 </div>   

 </div>
 </div>

<script src="js/calc.js"></script>
</body>

рони · #6 (**permalink**) 07.06.2015, 10:48

-=Женька=-,
изучите js и html
у li нет value -- можно использовать атрибут data - смотрите строки 24 -28 и содержание тегов li

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content=
  "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>Амата Новый стиль</title>
  <link rel="stylesheet" href="main.css"><!-- jQuery library (served from Google) -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- bxSlider Javascript file -->

  <script src="js/jquery.bxslider.min.js"></script><!-- bxSlider CSS file -->
  <link href="css/jquery.bxslider.css" rel="stylesheet">
</head>

<body>
  <script>
$(document).ready(function(){
  //$('.bxslider').bxSlider({ pagerCustom: '#bx-pager'});
  $('.colors li').click(function(event) {
  event.stopPropagation();
  event.preventDefault();
  $('#Result').html($(this).data('value'))
  })
  });
  </script>

  <div id="main">
    <div class="image-doors" style="float:left">
      <ul class="bxslider">
        <li><img src="img/ash-doors+r1.jpg"></li>

        <li><img src="img/Gold-alder+r1.jpg"></li>

        <li><img src="img/wenge-doors+r1.jpg"></li>

        <li><img src="img/chestnut-doors+r1.jpg"></li>
      </ul>
    </div>

    <div class="option">
      <form>
        <div id="bx-pager">
          <br>

          <ul class="colors">
            <li data-value="1599">
              <div>
                <a href="" data-slide-index="0" title="Ясень R1"><img src="img/ash.png" alt=
                "Ясень" width="63" height="63"><br>
                Ясень R1</a>
              </div>
            </li>

            <li data-value="15">
              <div>
                <a href="" data-slide-index="1" title="Золотая ольха"><img src=
                "img/Gold-alder.png" alt="Золотая ольха" width="63" height="63"><br>
                Золотая ольха R1</a>
              </div>
            </li>

            <li data-value="159">
              <div>
                <a href="" data-slide-index="2" title="Венге"><img src="img/wenge.png" alt=
                "Венге" width="63" height="63"><br>
                Венге R1</a>
              </div>
            </li>

            <li data-value="59">
              <div>
                <a href="" data-slide-index="3" title="Каштан"><img src="img/chestnut.png"
                alt="Каштан" width="63" height="63"><br>
                Каштан R1</a>
              </div>
            </li>
          </ul>

          <fieldset>
            <legend>Размеры двери</legend>

            <table>
              <tr>
                <td></td>

                <th><label>Высота</label></th>

                <th>2000 мм</th>

                <td></td>

                <th><label>Ширина</label></th>

                <th><select>
                  <option value="600">
                    600 мм
                  </option>

                  <option value="700">
                    700 мм
                  </option>

                  <option value="800">
                    800 мм
                  </option>

                  <option value="900">
                    900 мм
                  </option>
                </select></th>
              </tr>
            </table>
          </fieldset>
        </div>
      </form>

      <div>
        <p>Сумма : <strong id="Result"></strong> <em>гривен</em></p>
      </div>
    </div>
  </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript