function
setup() {
createCanvas(600, 300);
textSize(18);
text(
"Click on the buttons to add, remove "
+
"or show the classes of the elements"
, 20, 20);
setBtn =
createButton(
"Add given class to element"
);
setBtn.position(30, 40);
setBtn.mouseClicked(addClass);
removeBtn =
createButton(
"Remove given class from element"
);
removeBtn.position(30, 70);
removeBtn.mouseClicked(removeClass);
showBtn = createButton(
"Show current classes"
);
showBtn.position(30, 100);
showBtn.mouseClicked(showClasses);
class_name = createInput(
'class1'
);
class_name.position(30, 140);
tmpElement = createElement(
"div"
);
}
function
addClass() {
clear();
let classToSet = class_name.value();
tmpElement.addClass(classToSet);
text(
"Class added with name: "
+
classToSet, 20, 200);
text(
"Click on the buttons to add, remove or "
+
"show the classes of the elements"
, 20, 20);
}
function
removeClass() {
clear();
let classToRemove = class_name.value();
tmpElement.removeClass(classToRemove);
text(
"Class removed with name: "
+
classToRemove, 20, 200);
text(
"Click on the buttons to add, remove or "
+
"show the classes of the elements"
, 20, 20);
}
function
showClasses() {
clear();
let setClasses = tmpElement.class();
if
(setClasses !=
''
)
text(
"The classes of the element are: "
+
setClasses, 20, 180);
else
text(
"The element has no classes"
, 20, 180);
text(
"Click on the buttons to add, remove or "
+
"show the classes of the elements"
, 20, 20);
}