由于这次我将jsfiddle中的代码与另一个问题的答案集成在一起，但是我问的是我在处理过程中遇到的错误，因此这个问题完全不同。
我正在编写一个小的脚本来生成一些表，主要思想是将文本复制到我的第一个文本区域中：
<textarea cols="70" rows="15" id="text" ></textarea>
按下按钮：生成表：
<button id="generate">Generate tables</button><br>
那叫函数：
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>关于javascript - 为什么以下按钮不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39564343/