Send JavaScript variable to HTML page

Question

I have the following HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <div class="field">
        <label for="value1">Introduce value</label>
        <input type="text" id="value1" name="value1" value="" />            
    </div>

    <div class="button-block">
        <input type="submit" value="Click" />
    </div>

    <div id="output">
        <h2>Result:</h2>
        <textarea name="result" id="result"></textarea>
    </div>

</body>
</html>

I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.

<script>
window.onload = function(){
    var val = document.getElementById('value1').innerHTML;

    document.getElementById('result').innerHTML = val;
};
</script>

Any ideas?

Ashish Patel · Accepted Answer · 2018-09-09 15:44:59Z

1

You have to use .value property of the input field instead of innerHTML. so it would be:

var val = document.getElementById('value1').value;

and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.

You can try adding a button with onClick event to execute this function in place of using window.onload

answered Sep 9, 2018 at 15:44

Ashish Patel

3674 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LittleSweetSeas · Accepted Answer · 2018-09-09 15:42:44Z

0

HTML controls you are working on are textboxes, so they have a value property, not innerHTML. Use this:

var val = document.getElementById('value1').value;
document.getElementById('result').value= val;

answered Sep 9, 2018 at 15:42

LittleSweetSeas

7,1242 gold badges24 silver badges27 bronze badges

Comments

jorgefpastor · Accepted Answer · 2018-09-09 15:45:04Z

0

You can't get the value of an input element using the innerHTML attribute. Use value instead:

 var val = documento.getElementById('value1').value;

Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.

answered Sep 9, 2018 at 15:45

jorgefpastor

3074 silver badges9 bronze badges

Comments

Bee H. · Accepted Answer · 2018-09-09 15:46:44Z

The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <div class="field">
        <label for="value1">Introduce value</label>
        <input type="text" id="value1" name="value1" value="" />            
    </div>

    <div class="button-block">
        <button onclick="printOutput()">Click</button>
    </div>

    <div id="output">
        <h2>Result:</h2>
        <textarea name="result" id="result"></textarea>
    </div>

</body>
</html>

Then in your script.js you would have,

function printOutput(){
    var val = document.getElementById('value1').value;

    document.getElementById('result').innerHTML = val;
}

score 0 · Accepted Answer · 2018-09-09 15:50:51Z

when the submit is clicked to put that value in the output

You have chosen wrong event window.onload, also you need .value instead of .innerHTML

Option 1: using jQuery, as you already have the import

$(function() {
  $('input[type="submit"]').on('click', function(e) {
    $('#result').val($('#value1').val());
  });
});

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="field">
  <label for="value1">Introduce value</label>
  <input type="text" id="value1" name="value1" value="" />
</div>

<div class="button-block">
  <input type="submit" value="Click" />
</div>

<div id="output">
  <h2>Result:</h2>
  <textarea name="result" id="result"></textarea>
</div>

Option 2: using plain js

document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
    document.querySelector('#result').value = document.querySelector('#value1').value;
  });
});

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="field">
  <label for="value1">Introduce value</label>
  <input type="text" id="value1" name="value1" value="" />
</div>

<div class="button-block">
  <input type="submit" value="Click" />
</div>

<div id="output">
  <h2>Result:</h2>
  <textarea name="result" id="result"></textarea>
</div>

Sunil Sharma · Accepted Answer · 2018-09-10 16:24:20Z

0

<script>
$( document ).ready(function() {
    setTimeout(function(){
        var val = document.getElementById('value1').innerHTML;
        var generateHere = document.getElementById("result");
        generateHere.innerHTML = val;
    }, 2000);
});
</script>

edited Sep 10, 2018 at 16:24

answered Sep 9, 2018 at 15:47

Sunil Sharma

1742 silver badges9 bronze badges

3 Comments

nycynik Over a year ago

What does this do?

brandizzi Over a year ago

That's interesting. Some explanation of what this code is doing (and how it is different from the OP's code) would be helpful.

Sunil Sharma Over a year ago

I think your script code is run before load you page DOM. But using this my script, script is run after 2 second of your page DOM load. That means script run after DOM load.

Collectives™ on Stack Overflow

Send JavaScript variable to HTML page

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related