I am learning about manipulating the DOM w/ javascript. I understood that JS can only access the DOM in a browser-environment, because the DOM is only available in the browser, and JS, being a "client-side" language, can run on the browser, access the DOM, and manipulate it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />… Read More How to access the document object model?
this javascript content: function scrollToElement(elementSelector, instance = 0) { const elements = document.querySelectorAll(elementSelector); if (elements.length > instance) { elements[instance].scrollIntoView({ behavior: "smooth" }); } } const link1 = document.getElementById("link1"); const link2 = document.getElementById("link2"); const link3 = document.getElementById("link3"); link1.addEventListener("click", () => { scrollToElement(".header"); }); but i not understand this and why it used instance and what tthe… Read More scrollToElement function using javascript
Put simply, I’ve tried the async and defer methods, as well as moving the script tag, to try to get dom manipulation to work. I think it might just be the code since neither are solving the issue. I copy pasted code directly from an example on The Odin Project, so I’m not quite sure… Read More HTML/JS – From TOP: Another uncaught typeerror post
I am creating a button on my web page but I have tried various things and I either get an error or the button is not populating with any text (see screenshot below, there should be a button called "BUTTON NAME" right above the words "Keys 2". What could I be doing wrong? dropDownButton =… Read More Button Name not able to set with setAttribute("name", "Button Name")
I need your help. My task is to create 100 divs with pure JavaScript. Each div should have the following functionality: Each div has its own name, like div1, div2, div3 and up to 100. For instance, I click on div31, div45, div89, they move to the top. Now the order of my elements is… Read More Items are returned incorrectly
I have an element in the DOM that I update its HTML using outerHTML property, but I can’t remove it using a method like remove(). <div id="element">Element</div> <div id="remove">Removed element</div> const element = document.getElementById("element"); const removedElement = document.getElementById("remove"); element.outerHTML = "<div>First</div>"; element.remove(); removedElement.remove(); In my example, element gets updated using outerHTML, but I can’t remove… Read More How to remove an element that has been modified by outerHTML
I am creating a program which gives the user a set of grocery items for a shopping list and displays it. It then gives the user an input in the form of an html form. It must use that input to add to the list. My issue is that after I input a new value… Read More How to add an item to a list using DOM manipulation without the original list repeating
I need to apply some CSS/JS on an existing web page. Within it there is <tr foodtablesupper> <td class="subheader" colspan="3"> Upper Floor </td> </tr> <tr foodchoice> <td class="dish-1"> Coleslaw </td> <td class="dish-2"> Porridge </td> </tr> <tr foodtablesupper> <td class="subheader" colspan="3"> Mezzanine Floor </td> </tr> I need to change the colspan to 4. How can I… Read More Setting colspan with Javascript on certain td (without any id)
I need to delete table rows in range from row with an ID "#deleteFirstRow" to row with an ID "#deleteLastRow". But all the other rows out of these two IDs should remain. NB: I tried to search posted answers but did not get any working solution. Please help! This is my table: <table> <tr>doNotDeleteRow</tr> <tr>doNotDeleteRow</tr>… Read More How to delete a range of rows using javascript (Vanilla or JQuery)
I have created a chess board using a table element and I want to get all the divs so I can see it printed in the console Since there are 64 squares I want to see them all listed in the the console so I can make an array from it, but what I get… Read More Get the children of a div element