Cheaters JavaScript

javascript clips for changing css/html

note: this guide is intended for personal website makers who, like myself, dont know much about js, but want to use it on their pages for practical uses (without learning the whole language)

This tutorial heavily focuses on onclick events (things that happen when you click an element)

>> jump to styling entire classes of elements

Changing the Style of a Single Element (+ Basics)

on the click of a button a single element's style is changed

heres the code!

<p id="id1">this text will change to purple</p>
<button onclick="document.getElementById('id1').style.color = 'purple';">click change above text to purple</button>

• id="id1" - the id i gave the target element, needed for the javascript to know what to affect - can be named anything (as long as no other element has the same name)
• onclick=""
  • an event javascript can be put into
  • this defines what happens when a user clicks the element
  • there are other event attributes, but this guide only uses this one
  • this is typically used in button elements, but it can be put in any element! (p, div, img, etc)
• document.getElementById() - this identifies what element is affected - these will almost always start with document.
• 'id1' - the id you gave the element you want to change
  • this is put in single quotes so onclick="" isnt ended early
• .style.color - what is being changed, think of it like a path to what you want to alter
• = 'purple' - what you are changing the property to (color in this case)
  • this is also put in single quotations so onclick="" isnt ended early
• like with CSS, you use a semicolon ; to end a line

for very simple changes, the javascript can be put in an event tag like onclick="". for more complicated changes you will want to create a function

<p id="par" style="border: 1px solid white;">this border will become rounded</p>
<button onclick="document.getElementById('par').style.borderRadius = '20px';">click to round the border above</button>

• note that if a CSS property has a dash in it like border-radius, the correspondong JS for it will omit the dash: borderRadius
• the second word must be capitalized, as is standard in JS

Hiding and Showing Elements (+ Functions)

I sometimes create "pages" by hiding and showing elements. since we will be changing multiple elements, we will create a function to hold all the lines of JS

<button onclick="page1()">page 1</button>
<button onclick="page2()">page 2</button>
<button onclick="page3()">page 3</button>
<div id="con1">content 1</div>
<div id="con2">content 2</div>
<div id="con3">content 3</div>

in the HTML body we make a button for each page, and we make a section to contain each page. page1() is a javascript function I made that defines what happens when the button is clicked. page2() and page3() are similar functions

<script>
  function page1() {
    document.getElementById('con1').style.display = 'block';
    document.getElementById('con2').style.display = 'none';
    document.getElementById('con3').style.display = 'none';}
    
  function page2() {
    document.getElementById('con1').style.display = 'none';
    document.getElementById('con2').style.display = 'block';
    document.getElementById('con3').style.display = 'none';}
    
  function page3() {
    document.getElementById('con1').style.display = 'none';
    document.getElementById('con2').style.display = 'none';
    document.getElementById('con3').style.display = 'block';}
</script>

• the scriptelement is used to contain javascript functions
• the script tag is in the head or body of the html document, not the style section
• a function is started by stating function
• the function is then named with parenthesis after the name - ex. page1() - said name can be anything you choose
• like with CSS, the lines in a single function are contained by {} brackets
• each line in these functions identifies a different container that we consider a "page"
• for .style.display the value = 'block' shows a section and = 'none' hides a section
• these three functions are almost the same, but the "page" we want to show is different for each

This may a little long, but luckily you only need as many functions and lines as you have pages, regardless of how much content is in a "page" section

Changing the Text in an Element

this is useful if you want an element to display a certain message after a button is clicked

<p id="color">you haven't clicked any color yet</p>
<button onclick="document.getElementById('color').innerHTML = 'you chose blue';">blue</button>
<button onclick="document.getElementById('color').innerHTML = 'you chose pink';">pink</button>

• the message is given an id
• .innerHTML is what is used to change the text between an elements start and end tag!
• you can then put the new text into quotation marks after the = sign
• you can apply any number of functions to the same element (this example has two functions affecting a single element)

Changing an Image, Link, or Stylesheet

Image

<img src="noelle.png" id="pic">
<button onclick="document.getElementById('pic').src = 'tailsralsei.png';">change image</button>

• the image is given an id in the html
• the image is identified by its id in javascript as normal
• .src is used to identify what is being changed about the element
  • similar to how style="" can be put inside the start element tag, any attribute such as src="", href="", etc can be changed by js
• the new image is then put between quotations

Link

Very similarly links can be changed

the initial link is to my fonts page, after clicking the button, it will be to my css tips page

<a href="https://solaria.neocities.org/fonts" id="link">link</a>
<button onclick="document.getElementById('link').href = 'https://solaria.neocities.org/csstips/csstips';">change link</button>

Stylesheet

changing the stylesheet may be helpful if you have a light and dark mode design for your page, and you only want one line of js to change it, rather than having js change every element

<link href="moonnight.css" rel="stylesheet" type="text/css" id="stylesheet1">

^ this is in the head of the html document

<button onclick="document.getElementById('stylesheet1').href = 'suntime';">light theme</button>

^ this button is in the body of the html document

i dont have an example for this one, but this is the same exact method used to change a link, as they both use the href="" attribute

Getting Information from an Element

instead of manually entering in a value in = ' ', we can use an element itself to define that value. it could be a different value from the same element, or from a different element entirely!

this example changes an element using information from that same element

<p id="p1">red</p>
<button onclick="document.getElementById('p1').style.color = document.getElementById('p1').innerHTML;">click to change above text color</button>

• here the color of the element is defined as the text of the element
• this only works if the text is also a valid html color (ex. purple would work, but grape wouldn't)
• the most important thing to note here is that the value after the equals sign is not in quotations

this example changes an element using information from a different element

<p id="p2" style="background: teal;">this text has a teal background</p>
<p id="p3 ">this text will change colors</p>
<button onclick="document.getElementById('p3').style.color = document.getElementById('p2').style.background;">click to make the second sentance the same color as the first's background</button>

• the second sentance (the one we want to change) is identified first
• its color is then defined as the background of the first sentance
• as long as the values are compatible, you can choose a different property

Changing the Clicked Element

Sometimes you want to have something change when itself is clicked, rather than having a seperate button for it. You could use the id method, but you can also use event.target

<p onclick="event.target.style.color = 'deeppink';">click this paragraph to change its text to pink!</p>

• instead of an id and document.getElemenyById, all that is needed to identify the clicked element is event.target
• this works inside of functions too if you want to do something more complex

Different Buttons with the Same Function

this section takes the previous two sections (getting information from elements and event.target) and puts them together. each button will have a different value of some kind, but they will all have the same function. event.target allows these buttons to have different effects despite having the same function

basically, the function gets a property value from the source button, which all have different values for said property. this example features a group of buttons that changes the color of a specified element.

<p id="sub" >this text will change colors!</p>
<button onclick="colorfunc()">deeppink</button>
<button onclick="colorfunc()">orange</button>
<button onclick="colorfunc()">yellowgreen</button>
<button onclick="colorfunc()">dodgerblue</button>
<button onclick="colorfunc()">darkorchid</button>
      
<script>
  function colorfunc() {
    document.getElementById('sub').style.color = event.target.innerHTML;}
</script>

• as you can see each button has the same function
• the function istelf is very simple in this example:
  • event.target.innerHTML identifies the text of the button clicked
  • i convienently made the innerHTML of each button a valid html color
  • even though the js is so simple, making this function is more convienent than putting the js in each button
• the event.target makes it even more simple, so we dont have to manually write in each color for each button
• you dont have to use innerHTML, you could use any property ^^

Incorperating User Input

how to make an element change according to what a user types/selects

Here we have three elements: the element being affected, the input box the user enters a value into, and a button that prompts the js to take effect

<p id="mes1" >this will repeat back what the user entered into the input box</p>
<input id="in1">
<button onclick="document.getElementById('mes1').innerHTML = 'you said: ' + document.getElementById('in1').value;">submit</button>

• an input box is created with the tag input which doesnt need an end tag - it is given an id
• first we indicate that the innerHTML (text) of the paragraph is being changed
• lets ignore the 'you said ' + for a moment:
  • in order to get the user input we use value (what the user types)
• any text we want the message to display that isn't from the user, goes in quotes (we did this before)
• in order to string together the text we want and the users input we use a plus sign + surounded by spaces

<p id="fun" style="text-shadow: 0.5px 0.5px 0px lemonchiffon">your color is: (type a color)</p>
<input id="funcolor">
<button onclick="colorpick()">enter</button>
<script>
  function colorpick() {
    document.getElementById('fun').innerHTML = 'your color is: ' + document.getElementById('funcolor').value;
    document.getElementById('fun').style.color = document.getElementById('funcolor').value;}
</script>

this is very similar to the first example, but since we changed two things we can put the js in a function to keep the html tidy

the script can also be written like this:

<script>
  function colorpick() {
    colorinput = document.getElementById('funcolor').value;
    document.getElementById('fun').innerHTML = 'your color is: ' + colorinput;
    document.getElementById('fun').style.color = colorinput;}
</script>

where colorinput is a variable we define as the input value. since we use that value twice in the function, we can make the lines simpler by using a variable for repeated snippets

Changing the Style of an Entire Class or Element Type

so far we have only altered a single element using getElementById() but there are other ways to identify elements

getElementByClassName('classexample') and getElementByTagName('tagexample') identify the element by its class name or html element name (p, span, div, etc)

document.querySelectorAll('selectorexample') can do both class names and element tags, as well as combinations of these (like those in CSS for example: .gallery img)

unfortuntely altering an entire group of elements is notas easy as using something like document.querySelectorAll('example').style.color = 'pink'; - this may only change the first element of this selector, not every one. the same is true for TagName and ClassName

instead we have to use something like this:

var y = document.querySelectorAll('p');
for(var j=0; j<y.length; j++) {
	y[j].style.color = 'pink';}

• first a variable is defined as the element tag or class we want
• the next line introduces a number, j, which starts off at zero (var j=0)
• j is less than the number of p elements (j<y.length)
• j increases by one and the function is repeated with the next value of j (j++)
  • it does not repeat infinetely bc j is less than the number of p elements
  • j does not fall one short however, because technically the first of an element is zero
• inside the brackets is where we change the css
• if we plug y in, it almost looks like document.getElementsByTagName('p').style.color = 'pink';
• the [j] simply indicates which numbered element is affected
  • if so desired, we could change a single element using just this line and substituting j with a number
  • document.getElementsByTagName('p')[0].style.color = 'pink'; would alter the first p element
  • [1] would affect the second element, etc
  • the second line and j allow the function to apply this style to all elements of that tag (or class) by putting in the number for every element

I like to use querySelectorAll('') instead of getElementsByTagName or getElementsByClassName because it does both and allows more complex selections like those used in CSS, ex:

• .class1 p - affects any p element contained within that class
• ul a - affects links only within lists
• p.class1 - affects any p element with the class, class1
• i, b - affects both i and b elements independently
• #id1 img - affects images within a container that has the id1 id
• ul.class2 b, button - affects b elements in lists with the class2 class, and all buttons
• these selectors would go in between the quotations

<div class="sec">
  <p >these paragraphs will change color</p>
  <p >second paragraph</p>
  <p >third paragraphv/p>
  <button onclick="multi()">change these paragraphs to purple</button>
  
  <script>
    function multi() {
      var x = document.querySelectorAll('.sec p'); 
      for(var i=0; i<x.length; i++) {
        x[i].style.color = 'mediumorchid';}}
  </script>
</div>

• first we have some p elements within a div that has the class "sec", and a button of course
• if we did not specify the class the paragraphs were in, every paragarph in this guide would turn purple
• we also used x and i instead of y and j, but since it is a different function, it wouldnt matter if we used the same variables

Filtering Collections

how to filter images or anything else using classes - applies concepts from changing an entire element type, and hiding/showing elements

<div class="all pink" style="background: deeppink;"></div>
<div class="all red orange" style="background: orangered;"></div>

i wont show all of the colored box html since there are so many, but each box looks like this. every box has the all class, and i gave each one a color class according to its color. those on the edge of two colors were given two color classes

<button onclick="colors('pink')">pink</button>
<button onclick="colors('red')">red</button >
<button onclick="colors('orange')">orange</button>
<button onclick="colors('yellow')">yellow</button>
<button onclick="colors('green')">green</button>
<button onclick="colors('blue')">blue</button>
<button onclick="colors('purple')">purple</button>
<button onclick="colors('all')">all</button>

here are the buttons. previously our functions have not had anything in their parentheses, but this example does colors('purple')! note how the function name is the same for each, but in the parentheses is the color class corresponding to each button name

<script>
  function colors(tag) {
	var x = document.getElementsByClassName('all');
	for(var i=0; i<x.length; i++) {
		x[i].style.display= 'none';}
	var y = document.getElementsByClassName(tag);
	for(var j=0; j<>y.length; j++) {
		y[j].style.display= 'inline-block';}}
</script>

• note how the function has tag in its paranthesis, this shows up in the second part of the function
• first we hide all of the elements with the class name we gave them (we could also use tag name or querySelectorAll)
• then we display the elements we want
  • i used flex for my rainbow page, but you could also use block, inline-block, or inline
  • noted is that we also have tag in getElementsByClassName(tag) and it is not an actual class name (it would be in quotes if it were)
  • the different classes in the parentheses in the buttons, are plugged into the function in place of tag