JavaScript/HTML Problem

Question

A while ago I asked a question that gave me a piece of code I'm using for something. Here's something that involves that:

function jg() {
while (y = document.querySelector('html > *')) {
y.parentElement.removeChild(y);
break;
}
}
function nav(x) {
jg();
document.write(x);
}

I used the function nav() as the onclick for some spans in a paragraph. I can onty click the "link" three times. Why is that?
https://code.sololearn.com/W2APQEyBGaYB/?ref=app

(I aksed this again for a better chance at getting answers)

Answer 1

Thanks for the help, I'll work on that

Answer 2

Document.write is the root of problem ,
https://developer.mozilla.org/en-US/docs/Web/API/Document/write

I can't really help with the explanation ,you would think that why not document goes blank at the first time you click ,but instead at first click it replaces all the previous html content ,at second click it appends the body content to the html content ,and at third click it's blank ,

maybe more knowledgeable guys can help you on the explanation part !!

Answer 3

@Abhay Thanks for trying to help, I'll try and figure something out

Answer 4

The reason the page disappears on the third click (home) is due to the fact the body of the document is removed.

The while loop in the jg() function, is not set up properly.
With the code as is, it will remove the first child of the HTML element.

https://code.sololearn.com/WZxEyZe843i2/#html
https://developer.mozilla.org/en-US/docs/Web/API/Document/write

Please notice the js console as you press home on the navbar.

I'm assuming this is not the desired effect you wanted?

First, at line 4(js) "=" should be "===" most likely should be "!==".
Second, again at line 4(js), what is variable y?
Third, the selector you are using at line 4(js) is not the selector needed for want I assume you are trying to do.
But for clarification what is the job of jg() function?

Answer 5

Not a solution per se, just wanted to know if this is the desired result.

https://code.sololearn.com/WiHUzS7Bl2O5/#htm

Answer 6

I figured out a simpler solution:

function nav(x) {
document.getElementById("body").innerHTML = x;
}

...where x is a variable containing the new body element.

The main broad reason I think it wasn't working was I didn't know what I was doing and tried to use a piece of code I didn't understand yet.

Answer 7

Soapyguy , that code is messy. 😝 Here's why:
1. You added big HTML chunks in your JS, which is both unnecessary and a more resource intensive way of dealing with HTML manipulation;
2. querySelector('html > *') seems to be unclear to you, considering that will give you the first child of the 'html' tag, which is 'head'. So on your first tap you remove that portion of the document. I see no valid reason to do so. Then the first child of 'html' becomes 'body', which also doesn't make sense to be removed.

ODLNT gave you a good solution in terms of functionality, but if you want that to happen, you can easily handle it by displaying/hiding content without a single HTML line in your JavaScript.
1. Remove the HTML from your JS;
2. Use a 'hidden' CSS class on the HTML sections that you initially want to be invisible;
3. When you tap on a nav element, use JS to add the hidden class to the HTML content that should be hidden, and remove the hidden class from the one you want displayed.

Answer 8

You still need a bit of perspective on HTML and the DOM (Document Object Model). These are the 2 parts of an HTML document: head and body.

The head is where we set the title, metadata, and other stuff that is important to load *before* the visible part of the document, which is the body.

The body is where we put everything that the user can see and interact with. This means that your menu items and other control elements are always inside the body, so if you overwrite the whole body, you basically remove everything, including the control elements.

Here's where the DOM comes in: you can tinker with any HTML element, anywhere in the document, either the title tag in the head, or some div in the body. This allows you to have a number of elements having certain content, that you can play with.

In your case, you can display only one div, and hide all the others by default, then show the div you want based on the user's choice. Example:
https://code.sololearn.com/WDNQ7X269HmZ/

Answer 9

The important thing to note here is that you can do a lot of things with JavaScript. But there are two major things to consider:
1. is it really what I want?
2. is it resource intensive?

Of course there are more things to consider, but these two can have a huge impact if they're not top priorities. Generally it's best to make as little impact as possible in the rendered documents, mainly for performance reasons.

You also have to make sure that your changes keep your document as valid HTML. Because with some browsers your page might still be usable, but with other browsers you can easily break.