I'm learning to code on my own and have startet with javascript but i have a problem with my code and cant find the issue please explain me why my code replace all elements in the html document with the javascript result
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<title>JS</title>
</head>
<body>
<h1> Whats your name? </h1>
FirstName: <input type="text" id="first" value="">
LastName: <input type="text" id="second" value="">
<button onclick="myFunction()">Submit</button>
<script id="jsbin-javascript">
function myFunction() {
var first = document.getElementById("first").value;
var second = document.getElementById("second").value;
var fullName = first + " " + second;
var x = fullName;
console.log(x);
document.write(x);
}
</script>
</body>
</html>
