Подскажите с кодом, плиз! - JavaScript, Ajax - Страница 2

Alex11223 · 15.10.2016, 12:44

addEventListener вторым параметром принимает функцию, которая будет вызвана при срабатывании указанного события (первый параметр, имя события)
https://developer.mozilla.org/en-US/...dEventListener

spoon100500 · 15.10.2016, 12:56

Ну т.е. остальным функциям мы назначаем имена?
ckeckBox.onchange = function(){
if( this.checked ){}
}

chislo.onchange = function(){
console.log( this.value );
}

chislo1.onchange = function(){
console.log( this.value );

}
Чё то я запутался совсем)))

pompiduskus · 15.10.2016, 13:11

Как я уже говорил существует 1001 способ что-бы решить одну задачу.

// --------------------------------------------------------------
Сразу 2 куска кода которые делают одно и тоже, просто что-бы ты понял что этот язык вообще допускает такие конструкции.

Этот пример.

PHP код:


			
function pageIsLoadedFuntion(){
    console.log(" This Web-Page is loaded ");

}

window.addEventListener('load', pageIsLoadedFuntion );

И этот, это одно итоже. Просто в место того что бы передовать существующую функцию в "addEventListener", я декларирую эту функцию НА ЛЕТУ. Они еще называются анонимные функции, так как у нее нету имя, сразу идет тело.

PHP код:


			
window.addEventListener('load', function(){
    console.log(" This Web-Page is loaded ");
    
});

// --------------------------------------------------------------

Приведу 2 примера которе будут делать одно и тоже, но синтаксис для настройки будет разный.

Вариант 1

PHP код:


			

<script>

function sayHello(){
    console.log(" hello ");

}

</script>

<body>

    <div id="my_div" onclick="sayHello()">

</body>

// -----------------------------------------------------------------------------------
Теперь второй пример. Делает он абсолютно тоже самое, но дает больше контроля из кода.
Другими словами, мне ничего не нужно менять в разметке.

PHP код:


			

<script>

var my_div; // Глобальная область вмдемости.

window.addEventListener('load', function(){

    // Ждем полной загрузки страници

    my_div = document.getElementById('my_div');

    my_div.onclick = function(){ // Опять анонимная функция
        console.log(" hello ");

    }



    // Можно было сделать так
    my_div.onclick = sayHelloFunctionName;

});

function sayHelloFunctionName(){
    console.log(" hello ");
}

</script>

<body>

    <div id="my_div">

</body>

Это просто особенности этого языка. Вот наверняка ты видел вот такую конструкцию

Код:


<body>
    <div id="my_div" onclick="alert(777)" >

</body>

Просто когда мы такое пишем, то мы даже не задумываемся что происходит.
Если разобраться то мы вешаем на событие "onlick" функцию "alert"

в коде это можно сделать 1001 способом. приведу парочку.

PHP код:


			

<script>

// ---------------------------------------------
function myFunction(){
    alert(777);
}
// ---------------------------------------------

// [1]
document.getElementById('my_div').onclick = function(){
    alert(777);
}

// [2]
document.getElementById('my_div').onclick = myFunction;


// [3]
document.getElementById('my_div').addEventListener('click', function(){
    alert(777);

});

// [4]
document.getElementById('my_div').addEventListener('click', myFunction );


</script>

spoon100500 · 15.10.2016, 18:13

Код:

<!doctype html>
<html lang="ru">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">
<head>
</head>
<body>
<select name="indexCombobox1" size="1" id="box">
<option value="500">А</option>
<option value="520">Б</option>
<option value="520">В</option>
<option value="560">Г</option>
<option value="650">Д</option>
</select>
<input type="number" id="editbox1" name="indexEditbox1" value="0.4" autocomplete="off" min="0.4" max="4" step="0.01" onkeyup="stCalc();">
<input type="number" id="editbox2" name="indexEditbox1" value="0.4" autocomplete="off" min="0.4" max="4" step="0.01">
<input type="button" id="button" name="" value="Расчет" onclick="Start();">
<div id="wb_rezult" class="style3">
<span style="color:#00FF00;font-family:'Times New Roman';font-size:21px;"><strong><em>Результат</em></strong></span></div>
<input type="checkbox" id="check" name="ck" value="on">
<div id="wb_zk" class="style3">
&nbsp;</div>

<script>
var resField, ckeckBox, resultDiv;
var chislo, chislo1, spisok,  result;
var counts = [2, 3, 4, 5];
var s = [60, 90, 120, 150];

	function Start(){
        chislo = document.getElementById('editbox1').value;
        chislo1 = document.getElementById('editbox2').value;

        spisok = document.getElementById('box').value;
        resultDiv = document.getElementById('wb_rezult');
		result = (chislo * chislo1 * spisok).toFixed(2);
    	
if (chislo < 0.4 || chislo1 < 0.4) {
    alert('Ширина и Высота должны быть от 0,4 до 4 м!');
	} else if (chislo > 4 || chislo1 > 4) {
	alert('Ширина и Высота должны быть от 0,4 до 4 м!');
  } else {
    resultDiv.innerHTML = result;
  }
}   
resField = document.getElementById('wb_zk');
ckeckBox = document.getElementById('check');
   
ckeckBox.addEventListener('change', stCalc.bind());
chislo.addEventListener('input', stCalc.bind());

function stCalc() {
  if (ckeckBox.checked) {
  resField.style.display = 'block';
 } else {
    resField.style.display = 'none';
  } 
    if (editbox1.value >= 0.4 && editbox1.value <= 1.8) {
      resField.innerHTML = counts[0];
    } else if (editbox1.value >= 1.81 && editbox1.value <= 2.5) {
      resField.innerHTML = counts[1];
    } else if (editbox1.value >= 2.51 && editbox1.value <= 3.5) {
      resField.innerHTML = counts[2];
    } else if (editbox1.value >= 3.51 && editbox1.value <= 4) {
      resField.innerHTML = counts[3];
  }
 }
 //Не работает эта функция, весь мозг себе выт... 
ckeckBox.addEventListener('change', dtCalc.bind());
function dtCalc() {
 if (ckeckBox.checked) {
  if (resField.innerHTML = counts[0]) {
  resultDiv.innerHTML = (+result + s[0]).toFixed(2);
  } else if (resField.innerHTML = counts[1]) {
  resultDiv.innerHTML = (+result + s[1]).toFixed(2);
  } else if (resField.innerHTML = counts[2]) {
  resultDiv.innerHTML = (+result + s[2]).toFixed(2);
  } else if (resField.innerHTML = counts[3]) {
  resultDiv.innerHTML = (+result + s[3]).toFixed(2);
  } else if (resField.innerHTML = counts[3]) {
  resultDiv.innerHTML = (+result + s[3]).toFixed(2);
  }
 }
}

</script>
</body>
</html>

pompiduskus · 15.10.2016, 20:03

Получилось то что хотел или нет ?

И еще мелочь, meta таги и все что с этим связано, да и <link/> <script/>
лучше помещать между тегами

Код:

<head>
    ...
</head>

Это вообще более правильно. И потом программно с ними легче работать. Как пример можно вот так

Код:

document.head.innerHTML = "<script></script>"; 
document.head.innerHTML += "<script></script>";

Alex11223 · 15.10.2016, 20:23

Цитата:

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

Получилось то что хотел или нет ?

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

spoon100500 · 15.10.2016, 21:04

Эта часть кода не работает

Код HTML:

 //Не работает эта функция, весь мозг себе выт... 
ckeckBox.addEventListener('change', dtCalc.bind());
function dtCalc() {
 if (ckeckBox.checked) {
  if (resField.innerHTML = counts[0]) {
  resultDiv.innerHTML = (+result + s[0]).toFixed(2);
  } else if (resField.innerHTML = counts[1]) {
  resultDiv.innerHTML = (+result + s[1]).toFixed(2);
  } else if (resField.innerHTML = counts[2]) {
  resultDiv.innerHTML = (+result + s[2]).toFixed(2);
  } else if (resField.innerHTML = counts[3]) {
  resultDiv.innerHTML = (+result + s[3]).toFixed(2);
  } else if (resField.innerHTML = counts[3]) {
  resultDiv.innerHTML = (+result + s[3]).toFixed(2);
  }
 }
}

spoon100500 · 15.10.2016, 21:07

Не знаю почему но в теле <head>...</head> скрипт не работает.

pompiduskus · 16.10.2016, 00:14

У тебя ошибки в программе. Я так понял что ты вообще не хочешь головой думать.

Уже 15 постов обсуждаем что к чему, а ты вдруг выдаешь код который одним из самых первых шел.

Вообщем, удачи

spoon100500 · 16.10.2016, 07:46

Цитата:

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

У тебя ошибки в программе. Я так понял что ты вообще не хочешь головой думать.
Уже 15 постов обсуждаем что к чему, а ты вдруг выдаешь код который одним из самых первых шел.
Вообщем, удачи

Да уж, позиция сильного, сказать, что ошибки и разбирайся сам. В постах обсуждаем один и тот же метод только с разных сторон, безпорна информация очень полезная, но то что я делал по первому методу, разницы ни какой. Ну уберу я из разметки и пропишу их в скрипте, одно и то же.

15.10.2016, 12:44	#11
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	addEventListener вторым параметром принимает функцию, которая будет вызвана при срабатывании указанного события (первый параметр, имя события) https://developer.mozilla.org/en-US/...dEventListener Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

15.10.2016, 12:56	#12
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Ну т.е. остальным функциям мы назначаем имена? ckeckBox.onchange = function(){ if( this.checked ){} } chislo.onchange = function(){ console.log( this.value ); } chislo1.onchange = function(){ console.log( this.value ); } Чё то я запутался совсем))) Еду медленно, но верно!

15.10.2016, 13:11	#13
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Как я уже говорил существует 1001 способ что-бы решить одну задачу. // -------------------------------------------------------------- Сразу 2 куска кода которые делают одно и тоже, просто что-бы ты понял что этот язык вообще допускает такие конструкции. Этот пример. PHP код: `function pageIsLoadedFuntion(){ console.log(" This Web-Page is loaded "); } window.addEventListener('load', pageIsLoadedFuntion );` И этот, это одно итоже. Просто в место того что бы передовать существующую функцию в "addEventListener", я декларирую эту функцию НА ЛЕТУ. Они еще называются анонимные функции, так как у нее нету имя, сразу идет тело. PHP код: `window.addEventListener('load', function(){ console.log(" This Web-Page is loaded "); });` // -------------------------------------------------------------- Приведу 2 примера которе будут делать одно и тоже, но синтаксис для настройки будет разный. Вариант 1 PHP код: `<script> function sayHello(){ console.log(" hello "); } </script> <body> <div id="my_div" onclick="sayHello()"> </body>` // ----------------------------------------------------------------------------------- Теперь второй пример. Делает он абсолютно тоже самое, но дает больше контроля из кода. Другими словами, мне ничего не нужно менять в разметке. PHP код: <script> var my_div; // Глобальная область вмдемости. window.addEventListener('load', function(){ // Ждем полной загрузки страници my_div = document.getElementById('my_div'); my_div.onclick = function(){ // Опять анонимная функция console.log(" hello "); } // Можно было сделать так my_div.onclick = sayHelloFunctionName; }); function sayHelloFunctionName(){ console.log(" hello "); } </script> <body> <div id="my_div"> </body> Это просто особенности этого языка. Вот наверняка ты видел вот такую конструкцию Код: `<body> <div id="my_div" onclick="alert(777)" > </body>` Просто когда мы такое пишем, то мы даже не задумываемся что происходит. Если разобраться то мы вешаем на событие "onlick" функцию "alert" в коде это можно сделать 1001 способом. приведу парочку. PHP код: <script> // --------------------------------------------- function myFunction(){ alert(777); } // --------------------------------------------- // [1] document.getElementById('my_div').onclick = function(){ alert(777); } // [2] document.getElementById('my_div').onclick = myFunction; // [3] document.getElementById('my_div').addEventListener('click', function(){ alert(777); }); // [4] document.getElementById('my_div').addEventListener('click', myFunction ); </script> <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/ Последний раз редактировалось pompiduskus; 15.10.2016 в 13:23.

15.10.2016, 20:03	#15
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Получилось то что хотел или нет ? И еще мелочь, meta таги и все что с этим связано, да и <link/> <script/> лучше помещать между тегами Код: `<head> ... </head>` Это вообще более правильно. И потом программно с ними легче работать. Как пример можно вот так Код: `document.head.innerHTML = "<script></script>"; document.head.innerHTML += "<script></script>";` <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

15.10.2016, 21:07	#18
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Не знаю почему но в теле <head>...</head> скрипт не работает. Еду медленно, но верно!

16.10.2016, 00:14	#19
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	У тебя ошибки в программе. Я так понял что ты вообще не хочешь головой думать. Уже 15 постов обсуждаем что к чему, а ты вдруг выдаешь код который одним из самых первых шел. Вообщем, удачи <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
подскажите плиз	Alex26RusLink	Общие вопросы C/C++	10	21.07.2009 19:03
Подскажите, что не так с кодом	Grisha248	Помощь студентам	2	24.05.2009 16:41
Подскажите плиз	Panik666	Общие вопросы Delphi	1	22.04.2009 23:19
Подскажите с кодом процедуры ButtonClick	KARUSHEV	Помощь студентам	3	23.03.2009 14:01
подскажите плиз!	Lestrini	Общие вопросы Delphi	6	03.10.2008 17:23