First *official* HTML program

  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4

59 Replies - 3608 Views - Last Post: 17 December 2012 - 10:11 AM

#46 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5954
  • View blog
  • Posts: 23,219
  • Joined: 23-August 08

Re: First *official* HTML program

Posted 09 December 2012 - 05:35 AM

First off, just telling us it's throwing an error, without telling us the error, is really stupid.

Second, how about checking that the variables you are trying to use are valid before you try to use them?

Seriously, if you want to be a web developer, you need to learn to use the tools available to you, like Firebug and Chrome's Developer Tools. And I'd also really suggest not using spaces in your CSS file names (or any file names).
Was This Post Helpful? 0
  • +
  • -

#47 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 12 December 2012 - 02:31 AM

I am using the Developer Console (that's how I found out about the error!). I have tried something a little simpler, but it is still throwing the Cannot read property 'cssText' of undefined error upon using this code:
<!DOCTYPE HTML>
<html>
<body>
<style href = "sample_project_CSS_file_body.css"></style>
<script>
  var stylesheet = document.styleSheets[0];
  alert(stylesheet.cssRules[0].cssText); //should show the text, but doesn't
</script>
</body>
</html>


I bring the Javascript into the HTML to make everything apparent. I also renamed the file as per suggestion.

EDIT: I took the [0] off cssRules, and it returns (alerts) undefined! Despite the fact that the css file contains:
body
{
	background-color: #ffffff;
}	//end body


ALL THIS SHOULD BE ALERTED!

This post has been edited by IceHot: 12 December 2012 - 02:38 AM

Was This Post Helpful? 0
  • +
  • -

#48 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 12 December 2012 - 04:11 AM

test in the console (not via alert!) what document.styleSheets contains.
Was This Post Helpful? 1
  • +
  • -

#49 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 16 December 2012 - 05:55 PM

It seems like no matter how I write the CSS file, the cssRules property returns null, via the console (thanks for that suggestion!). Without somehow obtaining the position of the CSS rule to be changed (which, for some reason, seems to only be able to be done by accessing the cssRules array, which is null!) this is impossible. It then seems that my only way is to make the CSS documents empty and then add whatever rule it is I want to add, which would make for a, dare I say it, poor practice. It was suggested to me to use either this:
<link rel = "stylesheet" href = "example.css">
or
<link rel = "stylesheet" href = "example.css" type = "text/css"/>
(This suggestion I got from here: http://www.sitegroun...sample_css.htm) EITHER WAY RETURNS A NULL cssRules FOR THAT document. What could I possibly be doing wrong? What major mistakes could I be making that would make this otherwise simple project complicated?
Was This Post Helpful? 0
  • +
  • -

#50 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 16 December 2012 - 05:59 PM

you could be using IE, which IIRC uses rules instead of cssRules. if you have a proper console, you could examine what (sub-) properties document.styleSheets exhibits.
Was This Post Helpful? 0
  • +
  • -

#51 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 16 December 2012 - 06:26 PM

I am testing this all on Google Chrome (It has everything all in one spot).
Was This Post Helpful? 0
  • +
  • -

#52 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 16 December 2012 - 06:46 PM

go to the console, type document.styleSheets, hit enter. what do you get displayed?
Was This Post Helpful? 0
  • +
  • -

#53 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 16 December 2012 - 06:55 PM

Attached ImageA screencap of what I keep getting...

This post has been edited by IceHot: 16 December 2012 - 06:56 PM

Was This Post Helpful? 0
  • +
  • -

#54 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 16 December 2012 - 07:36 PM

Another snapshot (in this one I am testing all four of my CSS files, not just the one I made up when trying to diagnose this problem!).

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#55 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 16 December 2012 - 10:13 PM

There must then be an error with Google Chrome, because it works on my Firefox browser! Chrome has been acting strange lately, first relentlessly refreshing the page when I search for something (or use Facebook), and now this problem that has been holding me up for weeks. WTF?
Was This Post Helpful? 0
  • +
  • -

#56 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 17 December 2012 - 03:04 AM

maybe itís because you load the files locally?
Was This Post Helpful? 0
  • +
  • -

#57 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 17 December 2012 - 06:40 AM

Oh, and I changed the names of the CSS files. I simply replaced the ' ' with '_'. Also, I changed setcolor to this:
function setcolor()
{	
	var strarray = Array ("textred", "textgreen", "textblue");	//These will look familiar if you took a look at the HTML
	var intarray = Array (256,256,256);	
	var cssRuleCode;
	var temp = "";
	var y = 3;
	//You should keep in mind that this function is called EVERY TIME THE USER CLICKS A BUTTON. Thus, you don't need to loop upon encountering invalid input.
	var keepgoing = false;
	for (var x = 0; x < 3; x++)
	{
		strarray[x] = document.getElementById(strarray[x]).value;
		//if there is an invalid character, we alert it to the user!
		var patt = /[^0-9a-fA-F]/g;
		if (strarray[x].match(patt) != null) alert("You entered a non-hexadecimal character in box "+x+1".");
		else if (strarray[x].length > 2) alert("Please only enter two hexadecimal characters!");
		else
		{
			if (strarray[x] == "") strarray[x] = "0";
			intarray[x] = parseInt(strarray[x],16);
			if (x == 2) keepgoing = false;
		}	//end else
	}	//end for
	if (keepgoing)
	{
		//Here, we could use practically enumerate this with just three lines. The rest of the code uses the set number.
		if (this.id == "buttona") y = 0;
		else if (this.id == "buttonb") y = 1;
		else if (this.id == "buttonc") y = 2;
		if (document.all) cssRuleCode = document.styleSheets[y].rules;
		else cssRuleCode = document.styleSheets[y].cssRules;
		for (var x = 0; x < 3; x++)
		{
			temp += String(intarray[x]);
			if (x != 3) temp += ',';
		}	//end for
		if (y < 3) cssRuleCode[0].color.value = "rgb("+temp+")";
		else
		{
			for (var z = 0; z < 4; z++)
			{
				if (document.all) document.styleSheets[z].rules[0].color.value = "rgb("+temp+")";
				else document.styleSheets[z].cssRules[0].color.value = "rgb("+temp+")";
			}	//end for
		}	//end else
	}	//end if
}	//end setcolor


I also rearranged the button's id's. Here's what they are now:
<button id = "buttona">the title</button>
<button id = "buttonb">the text in the first paragraph</button>
<button id = "buttonc">the results of your responses to the popups</button>
<button id = "buttond">the background</button>


However, I get new errors upon using that action() in the HTML. I get:
SyntaxError: missing ) after argument list @ , which refers to this line:
if (strarray[x].match(patt) != null) alert("You entered a non-hexadecimal character in box "+x+1".");
, and this error about me trying to call action() from the HTML: ReferenceError: action is not defined @ I have inspected my Javascript code and see no instances of mismatched parentheses. I was under the impression (via that Google developers submission) that you could bring an external Javascript file into the head of your HTML document, and then call a function in it to start the action that .js file was supposed to perform, when it was supposed to happen! (This worked for me before, and I don't know why this isn't the case now.)

This post has been edited by IceHot: 17 December 2012 - 06:40 AM

Was This Post Helpful? 0
  • +
  • -

#58 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 17 December 2012 - 07:34 AM

if a JS file (be it external or just a script section) encounters an error on parsing, the whole script is discarded.

with regards to the error (ok, Firebug, but it makes the error clear)
Syntax Error: missing ) after argument list

alert("You entered a non-hexadecimal character in box "+x+1".");
-----------------------------------------------------------^


PS. that’s why one liners can be hard to debug.

This post has been edited by Dormilich: 17 December 2012 - 07:35 AM

Was This Post Helpful? 1
  • +
  • -

#59 IceHot  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 186
  • Joined: 28-August 12

Re: First *official* HTML program

Posted 17 December 2012 - 09:47 AM

This solved the problem. By the way, the project is working exactly how I wanted it to! Thanks for accompanying me on this journey! This project is done, for now at least. Until my curiosity provides for a way to modify this code so that I could have something cooler to show to a potential employer. You have been a good teacher.
Was This Post Helpful? 0
  • +
  • -

#60 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,590
  • Joined: 08-June 10

Re: First *official* HTML program

Posted 17 December 2012 - 10:11 AM

your curiousity is your sole limitation *gg*

PS. why making 2 tests for length and content? /^[0-9a-f]{1,2}$/gi

PPS. you should always use braces (even in places where you are allowed to omit them) and put one statement per line (easier debugging).

PPPS. (line #30) donít test for a browser, test for the feature itself* (IIRC, Opera also supports/supported document.all). i.e.
if ("cssRules" in document.styleSheets[y]) {
    cr = document.styleSheets[y].cssRules;
}
else if ("rules" in document.styleSheets[y]) {
    cr = document.styleSheets[y].rules;
}


* - thatís called "Feature Detection"

P4S. if you want to test for null explicitly, use the typesafe comparison operators (===, !==)
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • « First
  • 2
  • 3
  • 4