Скрыть объявление
На нашем форуме недоступен просмотр изображений для неавторизованных пользователей. Если Вы уже зарегистрированы на нашем форуме, то можете войти. Если у Вас еще нет аккаунта, мы будем рады, если Вы к нам присоединитесь. Зарегистрироваться Вы можете здесь.

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

Тема в разделе "ESP8266 Arduino IDE", создана пользователем Рубен, 23 дек 2015.

  1. Рубен

    Рубен Активный участник сообщества

    Сообщения:
    30
    Симпатии:
    41
    Мой вопрос: почему не вызывается функция в 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>&nbsp;</p>\
    <form>\
    <input type='checkbox' id='cb1' checked='checked' onclick='trans_par(&quot;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);
    Повторю вопрос: почему не вызывается функция? Пожалуйста, подскажите, кто понимает.
     
    Последнее редактирование: 24 дек 2015
  2. sally555

    sally555 Читатель

    Сообщения:
    69
    Симпатии:
    10
    Ну зачем же вы в тело html воткнули код скрипта на JS?
    вот эту строку:
    HTML:
    1. <button type=button onclick=function(){newAJAXCommand('newpage?cb1=1')}>test AJAX</button>
    замените на :
    HTML:
    1. <button type=button onclick="testAJAX()">test AJAX</button>
    а эту:
    Код (Javascript):
    1. function testAJAX(){new AJAXCommand('newpage?cb1=1');}
    поместите в секцию вашего JS скрипта между тэгами <script></script>

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

    Рубен Активный участник сообщества

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

    Рубен Активный участник сообщества

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

    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>&nbsp;</p>\r\n"
    "<form>\r\n"
    "<input type=\"checkbox\" id=\"cb1\" checked=\"checked\" onclick=\"trans_par(&quot;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";
     

Поделиться этой страницей