2016-09-19 56 views
0

這個問題是完全不同的,因爲這個時候我整合從一個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> 
+0

的[爲什麼jQuery的或DOM方法如的getElementById找不到元件?](可能的複製http://stackoverflow.com/questions/14028959/why-does-jquery -or-a-dom-method-such-getelementbyid-not-find-the-element) – Xufox

回答

2

JavaScript是很好..問題是你的代碼的DOM加載PR之前執行operly。由於你的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>

+0

@Fadlhly Permata,謝謝這真的很有幫助,我很多時間試圖弄清楚什麼是錯誤的,但現在我明白了, – neo33

+0

完成,感謝您的支持, – neo33

相關問題