Anyway to make Javascript and Function output look good? I need help.

Hardware Arduino Yún
#1

I have some code that I want to run on a single html page, and when you initially load the page everything looks ok, but as soon as the “Submit” button is pressed, everything goes to pot. I’m sure there must be some formatting capabilities that won’t upset the javascript, but I don’t know. Eventually these results will be sent to my YUN

So far in doing look ups for page formatting with javascript hasn’t produced beneficial results, and our own forum here doesn’t seem to use search code that stays inside the forums. you always get shunted to Google.

Any help or direction would be helpful.

Here is my code. If you run it, you’ll see what I mean:

<!DOCTYPE html>
<html>
<head>

function turnlightOn()
{
$('#content').load('/arduino/turnlightOn');
}
function turnlightOff()
{
$('#content').load('/arduino/turnlightOff');
}

</head>

<body>

<h1>Set the On Light Length </h1>

<p>Please input a number between 1 and 24 for the "On" light cycle, then click "Submit":</p>

<input id="numb" type="number">

<button type="button" onclick="myInputFunction()">Submit</button>




<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="intLightOn"></p>
<p id="intLightOff"></p>

<p id="year"></p>
<p id="hrs"></p>
<p id="min"></p>	
<p id="sec"></p

var x, b, c, text, text1, text2,text3; //global variables
var startLight, stopLight;
var stopFlag = 0;

<script>
function myInputFunction() {
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 24
    if (isNaN(x) || x < 1 || x > 24) {
        text = "Input not valid";
    } else {
        text = "Input is valid";
        c = (24 - x); //off light cycle time
        b = (24 - c); //on light cycle time
	text1 = "Light on cycle is: " + (b) + " hours";
	text2 = "Light off cycle is: " + (c) + " hours";
		//document.getElementById("intLightOn").innerHTML =  c;   
		//document.getElementById("intLightOff").innerHTML = b; 
		 
	document.getElementById("demo1").innerHTML = text1;
	document.getElementById("demo2").innerHTML = text2;
		
    }
    document.getElementById("demo").innerHTML = text;	

}


</script>


<p>Time: </p>
<p>Demonstrating Year, Seconds, Minute and hours</p>

<script>	



var myVar= setInterval(function(){timeFunc()}, 5000);	
//var stopFlag = 0;

function timeFunc() {    
var d = new Date();
document.getElementById("year").innerHTML = d;
document.getElementById("hrs").innerHTML = d.getHours();
document.getElementById("min").innerHTML = d.getMinutes();
document.getElementById("sec").innerHTML = d.getSeconds();



var h = document.getElementById("hrs").innerHTML = d.getHours();


<!-- Below "h" variable is merely a place holder at this time for my -->
<!-- Arduino start code, which will be geared for any timer type of action, such as lighting-->
<!-- 12 hour timer, 7a- 7p--all this is work in progress ATM


if (h == 7 && stopFlag == 0)
   {
   stopFlag += 1;
   $('#content').load('/arduino/turnlightOn'); //start the timer and run the lights thru Arduino
   }
      
   else if ( h == 19 && stopFlag >= 1)
   {   
   stopFlag = 0;
   $('#content').load('/arduino/turnlightOff');
   } 

}
</script>


</body>
</html>
#2

This forum is about C/C++ programing for the Arduinos. You will have better luck if you try the post on any other random web site.

Mark

#3

houdinihar:
Any help or direction would be helpful.

::::SNIP::::

@houdinihar,

  1. I see you are missing the jquery library. So, I’m not sure what you are getting. (I did not run your code, no need to without the missing library.)

  2. your jquery code says to load the data into an element with the ID=[i]content[/i],

$('#content').load('/arduino/turnlightOff');

There is NO element with the ID of content. You would need to add something like:

<span id=content></span>

  1. you’ve got typos in your HTML, all over the place. Looks like a failed cut & paste.

  2. Don’t put javascript in your HTML. In particular, this typo:

var x, b, c, text, text1, text2,text3; //global variables
var startLight, stopLight;
var stopFlag = 0;

Let us know how it’s going when you have it fixed.
Jesse

#4

houdinihar:
our own forum here doesn't seem to use search code that stays inside the forums. you always get shunted to Google.

The forum search code uses Google to do a site-specific search. Yes, you get shunted to Google, but if you look at the results, they are all from this forum.

#5