Why the following button does not work?

Question

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,

I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:

<textarea cols="70" rows="15" id="text"  ></textarea>

to the press the button called: Generate tables:

<button id="generate">Generate tables</button><br>

That calles the function called: generate

var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');

generate.onclick = function() {
  var text = input.value;
  text = text.replace(/(\S+)\s+(.*)/g, 
         '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
         '"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
         '"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
  output.textContent = text;
};

to produce the tables in the second text area called: out1

<div cols="3" rows="15" id="out1" ></div>

I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,

<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');

generate.onclick = function() {
  var text = input.value;
  text = text.replace(/(\S+)\s+(.*)/g, 
         '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
         '"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
         '"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
  output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
    color:GreenYellow ;
    background-color: black;
    margin-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 25px solid navy;
    box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
    background-color: gray;
    margin-top: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 25px solid navy;
    box-shadow: 0 8px 16px white;

    float:center;
    width:700px;
    overflow-y: auto;
    height: 200px;

    padding: 50px;

}
.wrapper {
    text-align: center;
}
.button {
  display: inline-block;
  box-shadow: 0 8px 16px white;
  border-radius: 15px;
  background-color: red;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 25px;
  padding: 25px;
  width: 20%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text"  ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Sep 19 '16 at 02:15

score 2 · Accepted Answer · answered Sep 19 '16 at 01:59

Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.

Look at my snippet, I've correcting your script.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            background: #CCC;
            border: 1px solid #000;
        }
        
        table td {
            padding: 15px;
            border: 1px solid #DDD;
        }
        
        textarea {
            color: GreenYellow;
            background-color: black;
            margin-top: 50px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: 25px solid navy;
            box-shadow: 0 8px 16px white;
        }
        
        body {
            background-color: #000C17;
        }
        
        #out1 {
            background-color: gray;
            margin-top: 150px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: 25px solid navy;
            box-shadow: 0 8px 16px white;
            float: center;
            width: 700px;
            overflow-y: auto;
            height: 200px;
            padding: 50px;
        }
        
        .wrapper {
            text-align: center;
        }
        
        .button {
            display: inline-block;
            box-shadow: 0 8px 16px white;
            border-radius: 15px;
            background-color: red;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 25px;
            padding: 25px;
            width: 20%;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>

<body>
    <textarea cols="70" rows="15" id="text"></textarea>
    <div cols="3" rows="15" id="out1"></div>
    <div class="wrapper">
        <button id="generate">Generate tables</button><br>

        <script>
            var generate = document.getElementById('generate');
            var input = document.getElementById('text');
            var output = document.getElementById('out1');

            generate.onclick = function () {
                var text = input.value;
                text = text.replace(/(\S+)\s+(.*)/g
                    , '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
                    '"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
                    '"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
                output.textContent = text;
            };
        </script>
</body>

</html>

@Fadlhly Permata, Thanks this was really helpful, I was so many time trying to figure out what was wrong but now I understand, — neo33, Sep 19 '16 at 02:05

Why the following button does not work?

1 Answers1