neo33 neo33 - 2 months ago 10
CSS Question

Why the following button does not work?

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>

Answer

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>

Comments