I am new to JavaScript and I am facing a problem in document.writeln function When I click on the submit button it doesn't print the value entered by the user in the browser, but it is getting printed on console using console.log()

what mistake should I have made ??

Please correct me if I am wrong somewhere...

Here is the code of my HTML file and js is included inside the script tag

function getval() {
    var submittedvalue = document.getElementById('number');
    document.writeln(submittedvalue.value);
}

<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>

CodePudding user response：

You can use innerHTML for write the result.

function getval() {
    var submittedvalue = document.getElementById('number');
    document.getElementById('value').innerHTML = submittedvalue.value;
}

<p id="value"></p>
<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>

CodePudding user response：

Don't use document.writeln and document.write after the page has been loaded (or, in most cases, at all). If you use them once the page is loaded, they implicitly open the page again — wiping out all of its contents and replacing them with the new content you provide.

To add to the DOM, use DOM methods:

• Calling insertAdjacentHTML or insertAdjacentText on an element (like document.body)
• Creating elements (createElement) and using appendChild on an element
• Using the newer append on element
• And so on (there's lots to the DOM)...

Separately, to get the value of an input, you use its .value property.

Here's your example using insertAdjacentText:

function getval() {
    const submittedValue = document.getElementById('number').value;
    document.body.insertAdjacentText("beforeend", submittedValue);
}

<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>

Or more likely, you want to add a p or similar to wrap it in:

Or creating an element and appending it, so all the numbers don't join up when you use the button more than once:

function getval() {
    const submittedValue = document.getElementById('number').value;
    const p = document.createElement("p");
    p.textContent = submittedValue;
    document.body.appendChild(p);
}

<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="getval()">Submit the number</button>

Finally, I strongly recommend not using onxyz-attribute style event handlers. Instead, use addEventListener:

document.getElementById("the-button").addEventListener("click", () => {
    const submittedValue = document.getElementById('number').value;
    const p = document.createElement("p");
    p.textContent = submittedValue;
    document.body.appendChild(p);
});

<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button id="the-button">Submit the number</button>

CodePudding user response：

don't use document.writeln or document.write in your code because first it override your document and secundo it is used to inject script in web page exemple :

document.write('put a script tag with somme js code')

instead use dom methodes as innerHTML(if is html content) or innerText(if it is just a plain text)or console.log() or an alert

    <p id="value"></p>
<label for="num">Enter the number</label>
<input type="number" name="num" id="number">
<button onclick="document.getElementById('value').innerHTML = document.getElementById('number').value">
    innerhtml</button>
<button onclick="console.log(document.getElementById('number').value)"> console</button>
<button onclick="alert(document.getElementById('number').value)">alert</button>

use f12 to see the console