Removing and adding content using Javascript

JavaScript
1

Hi everyone
I am working on javascript project, it been a week now trying to add functionality so that when user click a button “firstContent” is removed from the masterCard and
“secondContent” display, and it not working at all on Codepen though it show little effect on VS code[firstcontent was removed then returns blank card with no secondContent display… when display set to non for "secondContent"i thought JS will override CSS]. Please follow link for reference.

3

  • The event object does not have a targetContent property, you likely want target or currentTarget

  • You have a typo documnet

  • The if/else code should be inside the function.

  • You have a space in the id firstContent in the HTML <div id=" firstContent"> which will prevent getElementById from finding the id.

  • This syntax isn’t valid (goes for both add and remove).

buttonOne.classList.remove("firstContent").style.display = "none";

This removes a class from the element and does not return anything (it returns undefined, so you can’t dot . on to it, as it doesn’t return an element).

buttonOne.classList.remove("firstContent")

This selects an element and sets its inline-style

document.getElementById("firstContent").style.display = "none"

You can not combine the two in one line.

1 Like
4

Well honestly i was working on a little project to see how much i know JS [beginner], by creating box changing color function and it worked so i thought i would do the same for the HTML element and i have to admit i that did not know anything about JS DOM manipulation .
This is the code i was trying to modify so it manipulate HTML.

let button = document.querySelector(“button”);
let box = document.getElementById(“box”);
const changeBoxColor = () =>
box.style.backgroundColor == “red”
? (box.style.backgroundColor = “blue”)
: box.style.backgroundColor == “blue”
? (box.style.backgroundColor = “yellow”)
: box.style.backgroundColor == “yellow”
? (box.style.backgroundColor = “green”)
: (box.style.backgroundColor = “red”);
i think the project i was working on was beyond my knowledge. But i will learn. Thanks for your time sir.

5

Thank you!
now i see where i am lacking.
and thanks for the resources you provided.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.