Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с дублирующимся скриптом. (https://javascript.ru/forum/dom-window/50558-pomogite-s-dubliruyushhimsya-skriptom.html)

aulasenkau 01.10.2014 16:19

Помогите с дублирующимся скриптом.
 
<script type="text/javascript">

function calc() {

var soprovozhdenie = document.getElementById("soprovozhdenie");
var content = document.getElementById("content");

//Result

var result = document.getElementById("soprovozhdenie");
var result = document.getElementById("content");
var result = document.getElementById("result");
var price_soprovozhdenie = 0;
var price_content = 0;
var price = 0;
price_soprovozhdenie += parseInt(soprovozhdenie.value)*1;
price_content += parseInt(content.value)*1;
price=price_soprovozhdenie * price_content * 0.009;
result.innerHTML = price.toFixed(0);
}
</script>

<table>

<Strong>Данные для таблицы вводить в сантиметрах ( 1 метр = 100 сантиметров)</Strong>

<!--4soprovozhdenie//-->

<tr>
<td width="150">Высота (см.)</td>

<td width="100"><input type="text" id="soprovozhdenie" value="0" onkeyup="calc()" /></td>

</tr>

<!--5content//-->

<tr>
<td width="150">Ширина (см.)</td>

<td width="100"><input type="text" id="content" value="0" onkeyup="calc()" /></td>

</tr>

<!-- Итог -->
<tr>
<td width="250" class="td_result">СТОИМОСТЬ:</td>


<td width="75" class="td_result"><span id="result">0</span> $</td>
</tr>
</table>






Два таких калькулятора на странице. Как заставить их работать. Читал, читал да не вычитал...
Спасибо заранее!

ksa 01.10.2014 16:30

Цитата:

Сообщение от aulasenkau
Как заставить их работать

Как вариант:
- правильно задать ИДшники ключевым элементам
- в функцию передать "отличительный" параметр

danik.js 01.10.2014 19:16

Как правильно: обернуть в формы. Вместо id использовать name. И обращаться к полям как свойствам формы. keyup слушать у формы (в идеале - не keyup, а input и propertychange)

danik.js 01.10.2014 19:17

<table>

<Strong>Данные для таблицы вводить в сантиметрах ( 1 метр = 100 сантиметров)</Strong>

Нельзя просто так взять и сунуть strong прям в <table>. По правилам HTML парсинга это ошибочная разметка. Браузер переместит <strong> в положение перед таблицей.

aulasenkau 01.10.2014 20:20

Цитата:

Сообщение от ksa (Сообщение 332997)
Как вариант:
- правильно задать ИДшники ключевым элементам
- в функцию передать "отличительный" параметр

Спасибо. Только я не силен в этом особо. Можно наглядно показать на моем коде, какой должен быть второй код, чтобы они работали? А я дальше буду по примеру разбираться. Я не эксперт, просто ковыряю для себя сайт, что могу..

aulasenkau 01.10.2014 20:21

Цитата:

Сообщение от danik.js (Сообщение 333012)
Как правильно: обернуть в формы. Вместо id использовать name. И обращаться к полям как свойствам формы. keyup слушать у формы (в идеале - не keyup, а input и propertychange)

Спасибо. Только я не силен в этом особо. Можно наглядно показать на моем коде, какой должен быть второй код, чтобы они работали? А я дальше буду по примеру разбираться. Я не эксперт, просто ковыряю для себя сайт, что могу..

aulasenkau 01.10.2014 20:23

Цитата:

Сообщение от danik.js (Сообщение 333013)
<table>

<Strong>Данные для таблицы вводить в сантиметрах ( 1 метр = 100 сантиметров)</Strong>

Нельзя просто так взять и сунуть strong прям в <table>. По правилам HTML парсинга это ошибочная разметка. Браузер переместит <strong> в положение перед таблицей.


Не знаю, что значит "..переместит в положение перед таблицей", но отображается все, как надо.

А как правильно сделать? Так, для общего развития

ksa 01.10.2014 20:52

Цитата:

Сообщение от aulasenkau
Можно наглядно показать на моем коде, какой должен быть второй код, чтобы они работали?

У тебя и этот-то не работает...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function calc() { 
	var soprovozhdenie = document.getElementById("soprovozhdenie");
	var content = document.getElementById("content");
	var result = document.getElementById("soprovozhdenie");
	var result = document.getElementById("content");
	var result = document.getElementById("result");
	var price_soprovozhdenie = 0;
	var price_content = 0;
	var price = 0; 
	price_soprovozhdenie += parseInt(soprovozhdenie.value)*1;
	price_content += parseInt(content.value)*1;
	price=price_soprovozhdenie * price_content * 0.009;
	result.innerHTML = price.toFixed(0);
};
</script>
</head>
<body>
 <table>
<Strong>Данные для таблицы вводить в сантиметрах ( 1 метр = 100 сантиметров)</Strong>
 <tr>
 <td width="150">Высота (см.)</td>
<td width="100"><input type="text" id="soprovozhdenie" value="0" onkeyup="calc()" /></td>
 </tr>
 <tr>
 <td width="150">Ширина (см.)</td>
<td width="100"><input type="text" id="content" value="0" onkeyup="calc()" /></td>
 </tr>
 <!-- Итог --> 
 <tr>
 <td width="250" class="td_result">СТОИМОСТЬ:</td>
 <td width="75" class="td_result"><span id="result">0</span> $</td>
 </tr>
 </table>
</body>
</html>

Ты сначала работающий пример покажи...

aulasenkau 02.10.2014 00:10

Цитата:

Сообщение от ksa (Сообщение 333022)
Ты сначала работающий пример покажи...



.............................

<div class="menu"><ul>
<li class="page_item page-item-2"><a href="index.html">Главная</a></li>
<li class="page_item page-item-13"><a href="price.html">Цены</a></li>
<li class="page_item page-item-17"><a href="contact.html">Контакты</a></li>
</ul></div>

<div class="slogan">
<div class="banner">
<a href="#"><img alt="" src="images/banner01.gif"/></a>
<a href="#"><img alt="" src="images/banner02.gif" /></a>
<a href="#"><img alt="" src="images/banner03.gif" /></a>
<a href="#" class="callme_viewform" ><img alt="" src="images/banner04.gif" /></a></div>

<h2></h2>
</div>

</div>

<div class="content">

<div class="corner-left-top"><div class="corner-right-top"><div class="corner-left-bot"><div class="corner-right-bot">
<div class="column-right">





<div class="widget widget_categories">
<div class="widget-bgr">

<div class="title">



<center><h2>Наша продукция</h2></center>
</div>

<ul>
<li class="cat-item cat-item-3"><a href="gorizont.html">Жалюзи горизонтальные</a>
</li>
<li class="cat-item cat-item-3"><a href="vertikal.html">Жалюзи вертикальные</a>
</li>
<li class="cat-item cat-item-3"><a href="rolshtory.html">Рольшторы</a>
</li>
<li class="cat-item cat-item-6"><a href="plisse.html">Плиссе(римские шторы)</a>
</li>
<li class="cat-item cat-item-3"><a href="fotoj.html">Фотожалюзи</a>
</li>
<li class="cat-item cat-item-7"><a href="rollety.html">Защитные роллеты</a>
</li>
<li class="cat-item cat-item-6"><a href="setka.html"></a>
</li>
<li class="cat-item cat-item-6"><a href="ekran.html">Экраны для проекторов</a>
</li>

</ul>

</div>
</div>


<div class="widget widget_categories">
<div class="widget-bgr">

<div class="title">



<center><h2>Акции</h2></center>
</div>

<ul>
<li class="cat-item cat-item-3"><strong> До конца месяца при заказе от 3 окон скидка до 10 %</strong>
</li>

</ul>
</div>
</div>
<div class="widget widget_categories">
<div class="widget-bgr">

<div class="title">




</div>


</div>
</div>







<div class="banner">

</div>


</div><div class="column-center">
<div class="banner"></div>


<div id="post-4">

<div class="indent">
<div class="title">

<div class="bgr01">
<div class="corner-left-top"><div class="corner-right-top"><div class="corner-left-bot"><div class="corner-right-bot">



<h2><a href="#" rel="bookmark">100pudov.by - Жалюзи, рольшторы, роллеты в Минске</a></h2>

</div></div></div></div>
</div>



</div>

<div class="text-box">

<p class="fright"><img alt="" src="images/1page-img1.gif" /></p>
<br></br>
<center><strong><font size="5">Горизонтальные жалюзи</font> </strong></center>


Этот вид жалюзи изготавливается из пластин (ламелей).Функциональное назначение горизонтальных жалюзи очевидно - это регулировка светового и воздушного потоков, препятствие проникновению холода и экономия энергоносителей. Используется комплектация зарубежного и отечественного производства.

горизонтальные жалюзи Эти жалюзи просты и надежны в эксплуатации. Горизонтальные жалюзи можно разместить не только сверху оконного проёма, но и между рамами окна.
<br></br>
<strong><font size="3">Жалюзи горизонтальные деревянные и бамбуковые</font> </strong>

<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}
</style>
<p><img alt="" src="images/IMG0002.jpg" class="leftimg">

<ul>Существуют двух видов:
<li> широкие деревянные жалюзи (50мм)</li>
<li> узкие деревянные жалюзи (25мм)</li>
</ul>
Этот вид жалюзи изготавливается из деревянных и бамбуковых пластин (ламелей). Имеются как натуральные так и тонированные цветовые решения деревянных и бамбуковых жалюзи.
<p></p>
Этот вариант горизонтальных жалюзи наиболее подходит для темных цветом окон. Деревянные и бамбуковые жалюзи имеют множество преимуществ – это богатый вид, говорящий о статусе, натуральные материалы, дизайнерская универсальность.
<p></p> <center><strong>ЦЕНА: 90$</strong></center>
<p></p> <center><strong>Ориентировочный расчет стоимости </strong></center>
<p></p>
<center>
<script type="text/javascript">

function calc() {

var soprovozhdenie = document.getElementById("soprovozhdenie");
var content = document.getElementById("content");

//Result

var result = document.getElementById("soprovozhdenie");
var result = document.getElementById("content");
var result = document.getElementById("result");
var price_soprovozhdenie = 0;
var price_content = 0;
var price = 0;
price_soprovozhdenie += parseInt(soprovozhdenie.value)*1;
price_content += parseInt(content.value)*1;
price=price_soprovozhdenie * price_content * 0.009;
result.innerHTML = price.toFixed(0);
}
</script>

<table>

<Strong>Данные для таблицы вводить в сантиметрах ( 1 метр = 100 сантиметров)</Strong>

<!--4soprovozhdenie//-->

<tr>
<td width="150">Высота (см.)</td>

<td width="100"><input type="text" id="soprovozhdenie" value="0" onkeyup="calc()" /></td>

</tr>

<!--5content//-->

<tr>
<td width="150">Ширина (см.)</td>

<td width="100"><input type="text" id="content" value="0" onkeyup="calc()" /></td>

</tr>

<!-- Итог -->
<tr>
<td width="250" class="td_result">СТОИМОСТЬ:</td>


<td width="75" class="td_result"><span id="result">0</span> $</td>
</tr>
</table>

</center>

<br></br>
<p></p>
<strong><font size="3">Жалюзи горизонтальные металлические</font> </strong>
<p><img alt="" src="images/IMG0003.jpg" class="leftimg">
<p></p>Горизонтальные алюминиевые жалюзи - это типичная черта современного офиса, оформленных в строгом, классическом стиле, это лучшее сочетание надежности, функциональности и удачного решения для оформления интерьера. Простота в уходе и эксплуатации являются неоспоримым преимуществом для установки алюминиевых жалюзи в любых помещениях.<p></p> Большая цветовая гамма позволит Вам удачно подобрать цвет жалюзи для любого интерьера.
Горизонтальные алюминиевые жалюзи изготовлены из полосок алюминиевой ленты шириной 25 (или 16 мм), окрашенной в разные цвета специальной экологически чистой краской, стойкой к воздействию солнечной радиации и перепадам температуры.



<br></br>
<center> <img alt="" src="images/phones.gif" /> <a href="#" class="callme_viewform" ><img alt="zakaz" src="images/banner04.gif" /></a></center>
<br></br>
<strong>Компания 100pudov.by - Жалюзи от производителя по самой низкой цене в г. Минске</strong>






</div>

</div>
<div id="post-1">

<div class="indent">
<div class="title">

<div class="bgr01">

</div>




</div>





<div class="link-edit"></div>


</div>

</div>

</div>
</div></div></div></div>

</div>

<div class="footer">






<div class="indent">
Copyright 2013 <a href="#">100pudov.by|Портал услуг в Минске</a>


<!-- Yandex.Metrika informer -->
<a href="http://metrika.yandex.ru/stat/?id=23433172&amp;from=informer"
target="_blank" rel="nofollow"><img src="//bs.yandex.ru/informer/23433172/3_1_FFFFFFFF_EFEFEFFF_0_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" onclick="try{Ya.Metrika.informer({i:this,id:234331 72,lang:'ru'});return false}catch(e){}"/></a>
<!-- /Yandex.Metrika informer -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter23433172 = new Ya.Metrika({id:23433172,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});

var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23433172" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->


</div>

</body></html>



Вот код страницы с одним калькулятором.
http://100pudov.by/jaluzee/gorizont.html - ссылка на нее же.

aulasenkau 02.10.2014 00:11

Простите за длину..


Часовой пояс GMT +3, время: 17:04.