//The next three functions return the elements on the page I call based on their x; (tagname, id, className) and y (index). i doesn't have a y. function t(x,y) { //Return tag if (y == undefined) { y = 0} return document.getElementsByTagName(x)[y] } //Is there a better way to handle these three functions: (t, i, and c), especially in the context of structuring your page in JavaScript? function i(x) { //return id return document.getElementById(x) } function c(x,y) {//return class (not fully functional) if (y == undefined) { for (var i in document.getElementsByClassName(x)){ return document.getElementsByClassName(x)[i] } //doesn't work to iterate through all class items. Tried for(var x=0;x>.length;x++, var names of, var names in). Suggestions welcome. Apparently in works for the first one, instead of throwing an error, but it doesnt iterate through all of the items still. } else { return document.getElementsByClassName(x)[y]} } // function buildapage() { /*** Builds the page. Didnt bother to use createElement and declare the whole page as nodes. I just wrote the HTML in a string. Bad Practice? Idk... */ // var html = document.createElement("html"); // html.innerHTML ="

Hello

Okay

Thats how it is

Alright then

Geez

" document.write( "

Loading?Today?I see.

Okay

Thats how it is

Alright then

Geez

" ) // document.body.appendChild(html); // What am I doing wrong that this doesnt work? } setTimeout(buildapage, 500); //Gives it a delayed loading effect... function writeapage() { t("header").innerHTML = "Welcome to my Page. Thanks for visiting."; t("header").contentEditable = "true" t("a").innerHTML = "Index"; t("a", 1).innerHTML = "Contact"; t("a", 2).innerHTML = "About"; t("h1").innerHTML = "Why I wrote this code, and how this code developed"; t("section").innerHTML = "This page is written 100% in the JS tab, as I wanted to practice and mess around with declaring styles with javascript. Turns out there are more than a few ways to do so.
I came up with the idea of making the elements of this page contentEditable= true, and then allowing the user to view the source in order to copy and paste the html and make their own page. I may or may not get around to making it fully edittable. Last time I was messing around with a save function when viewing the source so that you could view your edits. It worked but it then the JS was overwritten and content was no longer edittable. Looking for an easy workaround."; t("p").innerHTML = "View Source"; t("p", 1).innerHTML = ""; t("p").addEventListener("click",function(){ var h = t("html").innerHTML; var j = h; t("html").innerHTML += ""},false); t("footer").innerHTML = "Yall come back now, ya hear."; } setTimeout(writeapage,1000) function styleapage() { var sheet = document.createElement('style'); // Creates a new style element node t("p").className = "cool"; for (x=0; x <= 2; x++){ t("a", x).className = "pow";} t("header").className = "hot"; sheet.innerHTML = "body { background:black; color:beige;}.hot { background:red; } .pow {text-decoration:none; color: blue; background:black; border:1px solid white; border-radius:8px;} a {margin-right:10px} li:before { display:none;} div {display:block; height:50px; border:2px solid white; width:90%; overflow:none; text-align:center; margin:4%;} article { margin:10%;}"; //Writing the stylesheet as a string and setting it to the innerHTML of the new node sheet document.body.appendChild( sheet ); // Sets the var sheet node to the style element in the body //Here's a more basic way to change the style of an element with JavaScript t("div").style.marginTop = "88px" t("header").style.borderRadius = "4px"; t("footer").className="hot"; t("footer").style.bottom = "0px"; t("header").style.position = "fixed" t("header").style.top = "0%" t("footer").style.position = "fixed"; t("footer").style.width = "100vw"; //My for loop inside the c(x) function calling all var items of classes doesnt work. I've done something like this before. Time to read some old code. for (var x = 0; x < 3; x++) { c("pow",x).style.padding = "10px";} //I dont know why this next line of code behaves the way it does. It should either work or break the way I see it. If you remove the outer extra ((brackets())&&(more())) from the footer and header return it breaks, the way it functions now it only works on the header, and to me it would intuitively seem it would only work on the footer because it is written first. Hmm... (((t("footer")))&&(t(("header")))).style.fontSize = "32px"; } setTimeout(styleapage,1500); // Delays the styling of the page

build(x)