Javascript 为什么下面的按钮不起作用？_Javascript_Html_Css

Javascript 为什么下面的按钮不起作用？

javascript html css

Javascript 为什么下面的按钮不起作用？,javascript,html,css,Javascript,Html,Css,这个问题是完全不同的，因为这次我将JSFIDLE中的代码与另一个问题的答案集成在一起，但我问的是我在这个过程中遇到的一个错误我正在编写一个小脚本来生成一些表，主要思想是将文本复制到我的第一个文本区域，称为： <textarea cols="70" rows="15" id="text" ></textarea> 在名为：out1的第二个文本区域中生成表 <div cols="3" rows="15" id="out1" ></div>

这个问题是完全不同的，因为这次我将JSFIDLE中的代码与另一个问题的答案集成在一起，但我问的是我在这个过程中遇到的一个错误

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

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

在名为：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>


var generate=document.getElementById（'generate'）；
var input=document.getElementById（'text'）；
var output=document.getElementById（'out1'）；
generate.onclick=function（）{
var text=input.value；
text=text。替换（/（\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=文本；
};
表{背景：#CCC；边框：1px实心#000；}
表td{padding:15px；border:1px solid#DDD；}
文本区{
颜色：绿黄色；
背景色：黑色；
边缘顶部：50px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
}
正文{背景色：#000C17；}
#out1{
背景颜色：灰色；
边缘顶部：150px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
浮动：中心；
宽度：700px；
溢出y：自动；
高度：200px；
填充：50px；
}
.包装纸{
文本对齐：居中；
}
.按钮{
显示：内联块；
盒影：0 8px 16px白色；
边界半径：15px；
背景色：红色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字体大小：25px；
填充：25px；
宽度：20%；
过渡：均为0.5s；
光标：指针；
保证金：5px；
}
生成表

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

看我的代码片段，我正在修改你的脚本


桌子{
背景：#CCC；
边框：1px实心#000；
}
表td{
填充：15px；
边框：1px实心#DDD；
}
文本区{
颜色：绿黄色；
背景色：黑色；
边缘顶部：50px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
}
身体{
背景色：#000C17；
}
#out1{
背景颜色：灰色；
边缘顶部：150px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
浮动：中心；
宽度：700px；
溢出y：自动；
高度：200px；
填充：50px；
}
.包装纸{
文本对齐：居中；
}
.按钮{
显示：内联块；
盒影：0 8px 16px白色；
边界半径：15px；
背景色：红色；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字体大小：25px；
填充：25px；
宽度：20%；
过渡：均为0.5s；
光标：指针；
保证金：5px；
}
生成表

var generate=document.getElementById（'generate'）；
var input=document.getElementById（'text'）；
var output=document.getElementById（'out1'）；
generate.onclick=函数（）{
var text=input.value；
text=text。替换（/（\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=文本；
};

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

看我的代码片段，我正在修改你的脚本


桌子{
背景：#CCC；
边框：1px实心#000；
}
表td{
填充：15px；
边框：1px实心#DDD；
}
文本区{
颜色：绿黄色；
背景色：黑色；
边缘顶部：50px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
}
身体{
背景色：#000C17；
}
#out1{
背景颜色：灰色；
边缘顶部：150px；
显示：块；
左边距：自动；
右边距：自动；
边界：25像素固体海军；
盒影：0 8px 16px白色；
浮动：中心；
宽度：700px；
溢出y：自动；
高度：200px；
填充：50px；
}
.包装纸{
文本对齐：居中；
}
.按钮{
显示：内联块；
盒影：0 8px 16px白色；
边界半径：15px；
背景色：红色；
边境
<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>