Question

这个问题完全不同，因为这次我将jsfiddle的代码与另一个问题的答案进行整合，但我问的是我在这个过程中遇到的错误，

我正在编写一个小脚本来生成一些表格，主要的想法是将文本复制到我的第一个文本区域：

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

按下名为的按钮：生成表格：

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

调用名为：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;
};

在第二个文本区域中生成名为：out1

的表

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

我不知道为什么当我将文字复制到第一区时按下按钮没有任何反应，我想感谢任何修改代码的建议，提前谢谢，我真的很感谢支持，

<!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 1

你的javascript很好..问题是你的代码是在正确加载DOM之前执行的。由于在脚本执行时没有加载DOM，因此JS抛出了错误。

看看我的片段，我正在纠正你的剧本。

<!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>

为什么以下按钮不起作用？

1 个答案: