Я некоторое время играл с JavaScript и Arduino Ethe rnet Shield , и я пытаюсь отправить данные из Arduino на веб-страницу, которую они обслуживают, используя AJAX. Данные, которые я отправляю, представляют собой массив из 24 переменных. Для отображения данных я создал таблицу в JavaScript, используя for() l oop. Проблема заключается в том, что когда я пытаюсь назначить переменные ячейкам таблицы (по одной переменной на ячейку), данные получает только первая ячейка таблицы. Дело в том, что когда я создаю таблицу, используя HTML (все ячейки, созданные с помощью тегов <td></td>), переменные назначаются ячейкам таблицы правильно. Спасибо за ваше время!
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<title>Arduino WebBased Weather Station</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
@charset 'UTF-8';@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background-color: black;
font-family: 'Open Sans', sans-serif;
line-height: 1em;
text-align: center;
Color: #cccccc;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-left:auto;
margin-right:auto;
}
th {
border: 1px solid #336699;
color:#0040ff;
text-align: center;
padding: 8px;
}
td {
border: 1px solid #336699;
color:#0080ff;
text-align: center;
padding: 8px;
}
td.td2 {
border: 1px solid #336699;
color:#0080ff;
text-align: left;
padding: 8px;
}
</style>
<h1>Arduino Web-Based Weather Station</h1><hr>
<h3>WELCOME!</h3>
<p>Project is hosted on github. Please visit my <a href='https://github.com/zissis-pap'>page</a> for more!</p><hr>
</head>
<body onload="BuiltArray(); GetArduinoIO()"><br>
<div id="array1"></div>
<script>
var bool = false;
function BuiltArray() {
var arr1 ="<table style='width:100%'><tr><th colspan='25'>\
AVERAGE CONDITIONS FOR THE LAST 24 HOURS</th></tr><tr><td\ class='td2'>HOURS:</td>"
for (var i = 0; i <= 23; i++) {
arr1 += "<td><font color='#3d0099'>\
<span class='hrs'>...</span></font></td>";
}
arr1 += "</tr></table>";
document.getElementById("array1").innerHTML = arr1;
bool = true;
}
function GetArduinoIO() {
if(bool == true) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// XML file received - contains analog values, switch values and LED states
var count;
// get analog inputs
var num_an = this.responseXML.getElementsByTagName('hours').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("hrs")[count].innerHTML =
this.responseXML.getElementsByTagName('hours')[count].childNodes[0].nodeValue;
}
}
}
}
}
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "ajax_inputs", true);
request.send();
setTimeout('GetArduinoIO()', 2000);
}
}
</script>
</body>
</html>