Value is not printed in browser

Question

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>

Your original code “works”: it correctly replaces the document by the input’s value in an unclosed new document stream. Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Feb 18 '22 at 09:38
`document.writelln` is [not recommended](/q/802854/4642212) for DOM manipulations, as it is obsolete, slow and not suitable for any evolving application. Note that this method is often misunderstood: you’re trying to manipulate the DOM, not write to the document stream. See [the documentation about the DOM API on MDN](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and use methods and properties that aren’t discouraged. — Sebastian Simon, Feb 18 '22 at 09:38
Here's how to do this properly: https://jsfiddle.net/cn6Lumsb/ — , Feb 18 '22 at 09:42

score 0 · Answer 1 · answered Feb 18 '22 at 09:43

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>

T.J. Crowder · Answer 2 · 2022-02-18T10:00:25.893

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>

score -1 · Answer 3 · answered Feb 18 '22 at 10:10

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

Value is not printed in browser

3 Answers3