Где-то ошибка где не пойму

@Дмитрий Дмитрий · Регистрация: 17.09.2016

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

HTML5

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">
</head>
<body>
<input type="number" id="editbox1" value="0.4">
<input type="number" id="editbox2" value="0.4">
<button id="rul1" type="button" name="la" value="500" onclick="myFunc(this)"></button>
<button id="rul2" type="button" name="la" value="520" onclick="myFunc(this)"></button>
<button id="rul3" type="button" name="la" value="520" onclick="myFunc(this)"></button>
<button id="rul4" type="button" name="la" value="600" onclick="myFunc(this)"></button>
<button id="rul5" type="button" name="la" value="650" onclick="myFunc(this)"></button>
<div id="wb_result"></div>
<button id="rulon1" type="button" name="lal" value="2" onclick="myFun(this)"></button>
<button id="rulon2" type="button" name="lal" value="4" onclick="myFun(this)"></button>
<button id="rulon3" type="button" name="lal" value="6" onclick="myFun(this)"></button>
<button id="rulon4" type="button" name="lal" value="9" onclick="myFun(this)"></button>
<button id="rulon5" type="button" name="lal" value="10" onclick="myFun(this)"></button>
<script type="text/javascript">      
      var myFunc = function () {
        var editbox1 = parseFloat(document.getElementById('editbox1').value);
        var editbox2 = parseFloat(document.getElementById('editbox2').value);
        var b = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (editbox1 * editbox2 * b).toFixed(2);
      };
 
      var h = document.querySelectorAll('button[id^="rul"]');
      console.log('h');
      t = h.length;
      for(var i = 0; i < t; i++) {
        var c = h[i];
        c.innerHTML = c.value;
        c.onclick = myFunc;
      };
      
      var myFun = function () {
        var a = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (result * a).toFixed(2);
      };
      
      var d = document.querySelectorAll('button[id^="rulon"]');
      console.log('d');
      tt = d.length;
      for(var i = 0; i < tt; i++) {
        var cc = d[i];
        cc.innerHTML = cc.value;
        cc.onclick = myFun;
      }
      
</script>
</body>
</html>

@mrtoxas · 01.10.2016, 11:20

Селектор [id^="rul"] найдет элементы как #rul5, так и #rulon5.
[id^="rul"] ищет элементы, id которых начинается на rul.
Поэтому, если вы хотите находить элементы #rul5 и #rulon5 отдельно, тогда:
1. #rul5 обзываете #rul-5 и находите его селектором [id^="rul-"]
2. #rulon5 находите селектором [id^="rulon"]

@Дмитрий Дмитрий · 01.10.2016, 11:32 **[ТС]**

Т.е. если я переименую id="rulon1" в id="ad" то код будет такой

Javascript

<script type="text/javascript"> 
var myFun = function () {
        var a = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (result * a).toFixed(2);
      };
      
      var d = document.querySelectorAll('button[id^="ad"]');
      console.log('d');
      tt = d.length;
      for(var i = 0; i < tt; i++) {
        var cc = d[i];
        cc.innerHTML = cc.value;
        cc.onclick = myFun;
      }
</script>

Всё равно не работает.

@mrtoxas · 01.10.2016, 11:34

Я рассказал про работу селектора. А в коде просто уберите этот кусок

Javascript

var d = document.querySelectorAll('button[id^="rulon"]');
      console.log('d');
      tt = d.length;
      for(var i = 0; i < tt; i++) {
        var cc = d[i];
        cc.innerHTML = cc.value;
        cc.onclick = myFun;
      }

@Дмитрий Дмитрий · 01.10.2016, 11:36 **[ТС]**

Убрал, не работает.

Javascript

<script type="text/javascript">      
      var myFunc = function () {
        var editbox1 = parseFloat(document.getElementById('editbox1').value);
        var editbox2 = parseFloat(document.getElementById('editbox2').value);
        var b = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (editbox1 * editbox2 * b).toFixed(2);
      };
 
      var h = document.querySelectorAll('button[id^="rul"]');
      console.log('h');
      t = h.length;
      for(var i = 0; i < t; i++) {
        var c = h[i];
        c.innerHTML = c.value;
        c.onclick = myFunc;
      }
      
      var myFun = function () {
        var a = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (result * a).toFixed(2);
      }
        
</script>

как мы тогда определим значение переменной var a?

@mrtoxas · 01.10.2016, 11:40

И зачем вы в самом скрипте вешаете на кнопку вызов функции по клику, если в самой кнопке уже это задано изначально?
А что именно не работает? Циферки меняются, NaN не появляется.

@Дмитрий Дмитрий · 01.10.2016, 11:43 **[ТС]**

Работает только первая часть кода
var myFunc = function () {
var editbox1 = parseFloat(document.getElementById('editbox1').value);
var editbox2 = parseFloat(document.getElementById('editbox2').value);
var b = parseFloat(this.value);
var result = document.getElementById('wb_result');
result.innerHTML = (editbox1 * editbox2 * b).toFixed(2);
};

var h = document.querySelectorAll('button[id^="rul"]');
console.log('h');
t = h.length;
for(var i = 0; i < t; i++) {
var c = h[i];
c.innerHTML = c.value;
c.onclick = myFunc;
}

Вторая часть выдает NaN
var myFun = function () {
var a = parseFloat(this.value);
var result = document.getElementById('wb_result');
result.innerHTML = (result * a).toFixed(2);
}

@mrtoxas · 01.10.2016, 12:00

А, у вас две разные функции myFunc и myFun. Не разглядел. Вот нельзя было назвать вторую как-то иначe.

Javascript

1 2	var myFun = function () { var a = parseFloat(this.value);

this в данном случае, это не кнопка.

Javascript

1 2	var myFun = function (elem) { var a = parseFloat(elem.value);

А вот тут elem это уже кнопка

Добавлено через 3 минуты

Javascript

var myFun = function(elem) {
  var a = parseFloat(elem.value);
  var result = document.getElementById('wb_result');
  result.innerHTML = (result * a).toFixed(2);
};
 
var d = document.querySelectorAll('button[id^="rulon"]');
console.log('d');
tt = d.length;
for (var i = 0; i < tt; i++) {
  var cc = d[i];
  cc.innerHTML = cc.value;
}

@Дмитрий Дмитрий · 01.10.2016, 12:08 **[ТС]**

В html myFun(this)тоже переиминовывать на elem.
myFun(elem)

Добавлено через 7 минут

HTML5

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">
</head>
<body>
<input type="number" id="editbox1" value="0.4">
<input type="number" id="editbox2" value="0.4">
<button id="rul1" type="button" name="la" value="500" onclick="myFunc(this)"></button>
<button id="rul2" type="button" name="la" value="520" onclick="myFunc(this)"></button>
<button id="rul3" type="button" name="la" value="520" onclick="myFunc(this)"></button>
<button id="rul4" type="button" name="la" value="600" onclick="myFunc(this)"></button>
<button id="rul5" type="button" name="la" value="650" onclick="myFunc(this)"></button>
<div id="wb_result"></div>
<button id="ad1" type="button" name="lal" value="2" onclick="myFun(elem)"></button>
<button id="ad2" type="button" name="lal" value="4" onclick="myFun(elem)"></button>
<button id="ad3" type="button" name="lal" value="6" onclick="myFun(elem)"></button>
<button id="ad4" type="button" name="lal" value="9" onclick="myFun(elem)"></button>
<button id="ad5" type="button" name="lal" value="10" onclick="myFun(elem)"></button>
<script type="text/javascript">      
      var myFunc = function () {
        var editbox1 = parseFloat(document.getElementById('editbox1').value);
        var editbox2 = parseFloat(document.getElementById('editbox2').value);
        var b = parseFloat(this.value);
        var result = document.getElementById('wb_result');
        result.innerHTML = (editbox1 * editbox2 * b).toFixed(2);
      };
 
      var h = document.querySelectorAll('button[id^="rul"]');
      console.log('h');
      t = h.length;
      for(var i = 0; i < t; i++) {
        var c = h[i];
        c.innerHTML = c.value;
        c.onclick = myFunc;
      }
      
      var myFun = function(elem) {
  var a = parseFloat(elem.value);
  var result = document.getElementById('wb_result');
  result.innerHTML = (result * a).toFixed(2);
};
 
var d = document.querySelectorAll('button[id^="ad"]');
console.log('d');
tt = d.length;
for (var i = 0; i < tt; i++) {
  var cc = d[i];
  cc.innerHTML = cc.value;
}
          
</script>
</body>
</html>

Переименовал второй блок кнопок на id="ad"

@mrtoxas · 01.10.2016, 12:19

Да подождите, дайте понять что вы тут наворотили. Не надо в html ничего переименовывать

Добавлено через 8 минут
Возвращайте html в исходное состояние, как в первом посте и попробуйте этот код

Javascript

var buttons = document.querySelectorAll('button[id^="rul"]');
var editbox1 = parseFloat(document.getElementById('editbox1').value);
var editbox2 = parseFloat(document.getElementById('editbox2').value);
var result = document.getElementById('wb_result');
 
[].forEach.call(buttons,function(elem){
  elem.innerHTML = elem.value;
})
 
function myFunc(elem) { 
  var b = parseFloat(elem.value);
  result.innerHTML = (editbox1 * editbox2 * b).toFixed(2);
};
 
function myFun(elem) {  
  var a = parseFloat(elem.value);    
  result.innerHTML = (a*result.innerHTML).toFixed(2);
};

@Дмитрий Дмитрий · 01.10.2016, 12:24 **[ТС]**

Я даже объяснить не могу что не так

Но не работает.
В html все вернул как было.

Вставьте код, посмотрите сами, ерунда какая то

@mrtoxas · 01.10.2016, 12:27

Не работает или работает, но не так? Вот, песочница, вроде все работает

@Дмитрий Дмитрий · 01.10.2016, 12:34 **[ТС]**

Работает не так.
на кнопке число 500, а умножается не 500, а 80.
Второй блок кнопок где 2, 4, 6, 9, 10 умножает правильно но если нажимать например кнопку 2 постоянно то она будет умножать постоянно, а это однократное действие.

@mrtoxas · 01.10.2016, 12:49

Сообщение от Дмитрий Дмитрий

на кнопке число 500, а умножается не 500, а 80.

0,4*0,4*500 = 80

@Дмитрий Дмитрий · 01.10.2016, 12:51 **[ТС]**

1*1*500=80
2*2*500=80
Любое число *500=80

@mrtoxas · 01.10.2016, 13:07

HTML5

<input type="number" id="editbox1" value="0.4">
<input type="number" id="editbox2" value="0.4">
<button id="rul1" type="button" name="la" value="500"></button>
<button id="rul2" type="button" name="la" value="520"></button>
<button id="rul3" type="button" name="la" value="520"></button>
<button id="rul4" type="button" name="la" value="600"></button>
<button id="rul5" type="button" name="la" value="650"></button>
<div id="wb_result"></div>
<button id="rulon1" type="button" name="lal" value="2"></button>
<button id="rulon2" type="button" name="lal" value="4"></button>
<button id="rulon3" type="button" name="lal" value="6"></button>
<button id="rulon4" type="button" name="lal" value="9"></button>
<button id="rulon5" type="button" name="lal" value="10"></button>

Javascript

var buttons = document.querySelectorAll('button[id^="rul"]');
var resultDiv = document.getElementById('wb_result');
var result = 0;
 
[].forEach.call(buttons, function(elem) {
  elem.innerHTML = elem.value;
  if (elem.name == 'la') { elem.onclick = firstCalc; } 
     else if (elem.name == 'lal') { elem.onclick = secondCalc; }
})
 
function firstCalc() {
  var editbox1 = parseFloat(document.getElementById('editbox1').value);
  var editbox2 = parseFloat(document.getElementById('editbox2').value);
  var btnValue = parseFloat(this.value);  
  result = (editbox1 * editbox2 * btnValue).toFixed(2);
  resultDiv.innerHTML = result;
}
 
function secondCalc() {
resultDiv.innerHTML = (this.value*result).toFixed(2);
}

Результат

@Дмитрий Дмитрий · 01.10.2016, 13:09 **[ТС]**

Спасибо!!!!
Можно разжевать для особо одаренных.
Ещё вопрос, почему js код работает только в теге </body>, вроде как должен в теге <head>?

@mrtoxas · 01.10.2016, 13:23

Перед закрывающим </body> ему самое место.
А по коду. Если нажата кнопка с именем la, вызывается одна функция, если с именем lal - другая
Функция firstCalc меняет значение глобальной переменной result, а функция secondCalc просто выводит результат умножения result и значения нажатой кнопки.

@Дмитрий Дмитрий · 01.10.2016, 13:27 **[ТС]**

onclick="myFun(this) в html не нужен?

@mrtoxas · 01.10.2016, 13:29

Для конкретно этого кода - нет

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 12:49	14
	Сообщение от Дмитрий Дмитрий на кнопке число 500, а умножается не 500, а 80. 0,40,4500 = 80 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 12:51 [ТС]	15
	11500=80 22500=80 Любое число *500=80 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 13:23	18
	Перед закрывающим </body> ему самое место. А по коду. Если нажата кнопка с именем la, вызывается одна функция, если с именем lal - другая Функция firstCalc меняет значение глобальной переменной result, а функция secondCalc просто выводит результат умножения result и значения нажатой кнопки. 1

Где-то ошибка где не пойму

Решение

Решение

Решение

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 11:20	2
	Сообщение было отмечено Дмитрий Дмитрий как решение Решение Селектор [id^="rul"] найдет элементы как #rul5, так и #rulon5. [id^="rul"] ищет элементы, id которых начинается на rul. Поэтому, если вы хотите находить элементы #rul5 и #rulon5 отдельно, тогда: 1. #rul5 обзываете #rul-5 и находите его селектором [id^="rul-"] 2. #rulon5 находите селектором [id^="rulon"] 1

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 11:40	6
	И зачем вы в самом скрипте вешаете на кнопку вызов функции по клику, если в самой кнопке уже это задано изначально? А что именно не работает? Циферки меняются, NaN не появляется. 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 11:43 [ТС]	7
	Работает только первая часть кода var myFunc = function () { var editbox1 = parseFloat(document.getElementById('editbox1').value); var editbox2 = parseFloat(document.getElementById('editbox2').value); var b = parseFloat(this.value); var result = document.getElementById('wb_result'); result.innerHTML = (editbox1 * editbox2 * b).toFixed(2); }; var h = document.querySelectorAll('button[id^="rul"]'); console.log('h'); t = h.length; for(var i = 0; i < t; i++) { var c = h[i]; c.innerHTML = c.value; c.onclick = myFunc; } Вторая часть выдает NaN var myFun = function () { var a = parseFloat(this.value); var result = document.getElementById('wb_result'); result.innerHTML = (result * a).toFixed(2); } 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 12:24 [ТС]	11
	Я даже объяснить не могу что не так Но не работает. В html все вернул как было. Вставьте код, посмотрите сами, ерунда какая то 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 12:27	12
	Не работает или работает, но не так? Вот, песочница, вроде все работает 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 12:34 [ТС]	13
	Работает не так. на кнопке число 500, а умножается не 500, а 80. Второй блок кнопок где 2, 4, 6, 9, 10 умножает правильно но если нажимать например кнопку 2 постоянно то она будет умножать постоянно, а это однократное действие. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 13:09 [ТС]	17
	Спасибо!!!! Можно разжевать для особо одаренных. Ещё вопрос, почему js код работает только в теге </body>, вроде как должен в теге <head>? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	01.10.2016, 13:27 [ТС]	19
	onclick="myFun(this) в html не нужен? 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.10.2016, 13:29	20
	Для конкретно этого кода - нет 1