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

Question

由于这次我将来自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>

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 个解决方案

解决方案1
2 已采纳 2016-09-19 01:59:59

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-09-19 01:59:59

解决方案1
2 已采纳 2016-09-19 01:59:59