Why is this function deleting my html code

JavaScript
1

when i execute this function by clicking “SAY HI!!” all the HTML code are getting erased or rewritten . Here is the code. Why is this happening ? Also refreshing is not resetting the page.

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>Example Title</title>

    <script type="text/javascript" src="test_js.js"></script>
</head>

<body>
    <h1>abcd</h1>
    <h1>abcd</h1>
    <h1>abcd</h1>
    <h1>abcd</h1>
    <h1>abcd</h1>
    <h1 onclick="welcome('Hi!!')">SAY HI!!!</h1>
    
</body>

</html>

JS

function welcome(nm) {
    alert(nm);
    var name = prompt("what is your name");
    document.write("hello " + name);
    return 
};
2

What are you trying to do with document.write ? I’ve never used it before… had to look it up. Is this what you were expecting?:

3

you need to get the element you want to write in. in this case you are using document

4

Yes. But it is deleting all the h1 HTML tags. I don’t know why ?

6

why are the h1 tags disappearing ?

7

"Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document. "

@AymanGhaith is correct. What and where do you want to change. Your current code is removing everything.
…

<h1 id='name' onclick="welcome('Hi!!')">SAY HI!!!</h1>

document.getElementById('name').innerHTML = '3';

8

You are writing to the document, so anything inside it will be replaced. You should also be passing a string containing the HTML you want to write to the document.

function welcome(nm) {
  alert(nm);
  var name = prompt("what is your name");
  document.write(`<h1>Hello ${name}</h1>`);
}

I would not suggest using document.write() for DOM manipulation.