Решено Не вызывается "onClick" в теле <html>

Рубен · 23 Дек 2015

Мой вопрос: почему не вызывается функция в html? Пожалуйста, подскажите, кто понимает.
Исходные данные:
Arduino IDE 1.6.5; DevKit ESP8266 12E;
Взял за основу скетч (см. Спойлер: web_softAP). //Я ранее скачал более полный, но не смог сейчас найти.//
Сделал свой. Показываю сокращенный рабочий вариант, где нажатие на кнопку должно автоматически менять состояние checkbox и также, как и checkbox, формировать запрос на ESP8266.

[HASHTAG]#include[/HASHTAG] <ESP8266WiFi.h>
[HASHTAG]#include[/HASHTAG] <ESP8266WebServer.h>
const char *ssid = "AndroidRU"; //
const char *password = "snnh8953";
String form1 = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>\
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />\
<html>\
<head>\
<title>ESP8266_ruben</title>\
<style>\
body {\
background-color: [HASHTAG]#cccccc[/HASHTAG];\
font-family: Arial, Helvetica, Sans-Serif;\
Color: [HASHTAG]#000088[/HASHTAG];\
}\
</style>\
<script type= 'text/javascript'>\
var xmlhttp=getXmlHttp();\
var str_URL = '';\
var xmlhttp = getXmlHttp();\
function check_par(id_cb)\
{\
var x = id_cb.id;var str_io = 'cb' + x;\
alert(x);\
document.getElementById(str_io).checked =!document.getElementById(str_io).checked;\
trans_par(str_io);\
}";
//Продолжение

String form2 = "function trans_par(id_cb){\
if (document.getElementById(id_cb).checked)\
{\
str_URL='=1';\
}\
else\
{\
str_URL='=0';\
}\
str_URL='newpage?' + id_cb + str_URL;\
alert(str_URL);\
xmlhttp.open('GET',str_URL,true);\
xmlhttp.onreadystatechange = function()\
{\
if(xmlhttp.readyState == 4)\
{\
if(xmlhttp.status == 200)\
{\
alert(xmlhttp.responseText);\
}\
}\
}\
xmlhttp.send(null);\
}</script>\
</head>\
<body>\
<h1>Hello!</h1>\
<p> </p>\
<form>\
<input type='checkbox' id='cb1' checked='checked' onclick='trans_par("cb1&quot

'>\
<input type='button' id='1' value='синий' onclick='check_par(this)' style='width:96px'>\
</form>\
</body>\
</html>";

ESP8266WebServer server(80);

const int gpio = 2;

void handle_gpio2() {
int state = server.arg("cb1").toInt(); //compareTo("checked");
digitalWrite(gpio, state);
//server.send(200, "text/plain", String("LED is now ") + ((state)?"on":"off"));
}
void setup(void) {
Serial.begin(115200);
Serial.println("");
pinMode(gpio, OUTPUT);
WiFi.softAP(ssid);
// Wait for connection
/*
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
*/
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);

Serial.print("IP address: ");
Serial.println(WiFi.softAPIP());

// Set up the endpoints for HTTP server
server.on("/", []() {
server.send(200, "text/html", form1+form2);
});
server.on("/newpage", handle_gpio2);
// Start the server
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
// check for incomming client connections frequently in the main loop:
server.handleClient();
}

Сам скетч еще сырой и вопрос не в этом. Все загружается и мой смартфон видит прописанную в скетче html страничку, но не вызываются функции через "on_Click". Для убедительности я вписал alert(x); после первой строки в функции function check_par(..).

Может кому пригодиться: для того, чтобы разместить файл большего размера, я ввел несколько переменных String form1, String form2 и т. д. Потом их суммирую server.send(200, "text/html", form1+form2);

Повторю вопрос: почему не вызывается функция? Пожалуйста, подскажите, кто понимает.

sally555 · 24 Дек 2015

Ну зачем же вы в тело html воткнули код скрипта на JS?
вот эту строку:

HTML:

<button type=button onclick=function(){newAJAXCommand('newpage?cb1=1')}>test AJAX</button>

замените на :

HTML:

<button type=button onclick="testAJAX()">test AJAX</button>

а эту:

JavaScript:

function testAJAX(){new AJAXCommand('newpage?cb1=1');}

поместите в секцию вашего JS скрипта между тэгами <script></script>

весь код не проверял, может еще где что
и попробуйте оформлять вложение кода как положено, а то ничего не поймешь

Рубен · 24 Дек 2015

sally555 написал(а):
Ну зачем же вы в тело html воткнули код скрипта на JS?
вот эту строку:

HTML:

<button type=button onclick=function(){newAJAXCommand('newpage?cb1=1')}>test AJAX</button>

замените на :

HTML:

<button type=button onclick="testAJAX()">test AJAX</button>

а эту:

JavaScript:

function testAJAX(){new AJAXCommand('newpage?cb1=1');}

поместите в секцию вашего JS скрипта между тэгами <script></script>

весь код не проверял, может еще где что
и попробуйте оформлять вложение кода как положено, а то ничего не поймешь

Спасибо, но эта строка меня в данном случае не волнует, я ее включил для тестирования, поэтому сейчас из скрипта удалил, чтобы сузить интересующую область.
Вопрос остался актуальным.

Рубен · 26 Дек 2015

Вопрос решен: все дело в синтаксисе. Ниже привожу исправленный фрагмент кода. Следовало заменить ' на \" и заодно окончание строк...

String form2 =
"function trans_par(id_cb){\r\n"
"if (document.getElementById(id_cb).checked)\r\n"
"{\r\n"
"str_URL=\"=1\";\r\n"
"}\r\n"
"else\r\n"
"{\r\n"
"str_URL=\"=0\";\r\n"
"}\r\n"
"str_URL='newpage?' + id_cb + str_URL;\r\n"
"alert(str_URL);\r\n"
"xmlhttp.open(\"GET\",str_URL,true);\r\n"
"xmlhttp.onreadystatechange = function()\r\n"
"{\r\n"
"if(xmlhttp.readyState == 4)\r\n"
"{\r\n"
"if(xmlhttp.status == 200)\r\n"
"{\r\n"
"alert(xmlhttp.responseText);\r\n"
"}\r\n"
"}\r\n"
"}\r\n"
"xmlhttp.send(null);\r\n"
"}</script>\r\n"
"</head>\r\n"
"<body>\r\n"
"<h1>Hello!</h1>\r\n"
"<p> </p>\r\n"
"<form>\r\n"
"<input type=\"checkbox\" id=\"cb1\" checked=\"checked\" onclick=\"trans_par("cb1&quot\">\r\n"
"<input type=\"button\" id=\"1\" value=\"синий\" onclick=\"check_par(this)\" style=\"width:96px\">\r\n"
"</form>\r\n"
"</body>\r\n"
"</html>\r\n";

Решено Не вызывается "onClick" в теле <html>

Рубен

Member

sally555

New member

Рубен

Member

Рубен

Member