-
Notifications
You must be signed in to change notification settings - Fork 0
/
testscript.js
64 lines (57 loc) · 2.3 KB
/
testscript.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
//Creates a new varibale called myItem that refers to element with the id "firsttest"
myitem = document.getElementById("firsttest");
thebutton = document.getElementById("thebutton");
otheritem = document.getElementById("buttontest");
thebutton2 = document.getElementById("thebutton2");
otheritem2 = document.getElementById("buttontest2");
textentry = document.getElementById("myinput");
thebutton3 = document.getElementById("thebutton3");
thebutton4 = document.getElementById("thebutton4");
oconnorImage = document.getElementById("oconnorimage2");
//Gives myItem an event listener, saying something should happen(execute onClick function) when it is clicked("click")
myitem.addEventListener("click", onClick);
myitem.addEventListener("mouseout", onMouseOut)
thebutton.addEventListener("click", onButtonClick);
thebutton2.addEventListener("click", onButtonClick2);
textentry.addEventListener("change", onChange);
thebutton3.addEventListener("click", onButtonClick3);
thebutton4.addEventListener("click", onButtonClick4);
oconnorImage.addEventListener("click", expandImage);
//Tells myItem what to do when its clicked(change text color to green)
function onClick() { //function to be executed when item is clicked
myitem.style.color = "green"; //changes text color to green
myitem.style.backgroundColor = "aliceblue"; //changes background color to blue
myitem.style.borderStyle = "dashed"; //adds border
}
function onMouseOut() {
myitem.style.color = "darkslateblue";
myitem.style.backgroundColor = "seashell";
myitem.style.borderStyle = "none";
}
function onButtonClick() {
otheritem.style.color = "red";
}
function onButtonClick2() {
otheritem2.style.backgroundColor = "lightgrey";
}
function onChange() {
newtext = myinput.value;
otheritem.innerHTML = newtext;
}
function onButtonClick3() {
otheritem.style.color = "darkslateblue";
}
function onButtonClick4() {
otheritem2.style.backgroundColor = "seashell";
}
function expandImage() {
if (oconnorImage.style.position == "") {
oconnorImage.style.position = "absolute";
oconnorImage.style.left = "5%";
oconnorImage.style.width = "90%";
}
else if (oconnorImage.style.position == "absolute") {
oconnorImage.style.position = "";
oconnorImage.style.width = "50px";
}
}