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

this text will change to purple

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 >

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

this border will become rounded

< 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 >

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

content 1
content 2
content 3

< 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 >

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

you haven't clicked any color yet

< 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 >

Changing an Image, Link, or Stylesheet


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

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="" id="link" >link< /a >
< button onclick="document.getElementById('link').href = '';">change link< /button >

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 diffrent 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 >

this text has a teal background

this text will change colors

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 >

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

click this paragraph to change its text to pink!

< p onclick=" = 'deeppink';">click this paragraph to change its text to pink!< /p >

Different Buttons with the Same Function

this section takes the previous two sections (getting information from elements and and puts them together. each button will have a different value of some kind, but they will all have the same function. 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.

this text will change colors!

< 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 =;}
< /script >

Incorperating User Input

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

this will repeat back what the user entered into the input box

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 >

enter a valid color name (red, pink, green, etc, #hex codes, rgb() codes)

your color is: (type a color)

< 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)

unfortuntely altering an entire group of elements is notas easy as using something like document.getElementByClassName('classexample').style.color = 'pink'; - this may only change the first element of this class, not every element with that class. the same is true for TagName

instead we have to use something like this:

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

the following example is slightly different because i wanted to affect only the p elements within a class, rather than every single p element in this document. to do that we use querySelectorAll('') instead of getElementsByTagName or getElementsByClassName. this allows us to make more complex selections like you can in CSS, ex:

these paragraphs will change color

second paragraph

third paragraph

< section class="sec" >
  < p >these paragraphs will change color< /p >
  < p >second paragraph< /p >
  < p >third paragraph< /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 >
< /section >

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 >