为什么下面的按钮不工作

Why the following button does not work?

本文关键字：工作 按钮 为什么      更新时间：2023-09-26

这个问题是完全不同的，因为这一次我从一个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>

你的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>

相关文章：