2016-09-19 6 views
0

この質問は、この時間がjsfiddleのコードを別の質問の回答と統合しているという事実とはまったく異なっていますが、私はプロセスでエラーが発生することを尋ねています。なぜ次のボタンが機能しないのですか?

私は執筆中ですボタンと呼ばれるプレスに

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

:いくつかのテーブルを生成するために、小さなスクリプトは、主要なアイデアは、呼び出された私の最初のテキストエリアにテキストをコピーすることです

<button id="generate">Generate tables</button><br> 

機能をcalles:テーブルを生成します呼ばれる:

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; 
}; 

と呼ばれる2番目のテキスト領域にテーブルを生成するために生成します。

<div cols="3" rows="15" id="out1" ></div> 

OUT1私は拳領域にプレスをテキストをコピーする場合、ボタンの何も起こらない理由を私は知りません、 DOMロードPR前に実行される問題は、あなたのコード..です使いのブラウザではJavaScriptが結構です、私は、コードを修正するための任意の提案をお願いしたいと思います事前のおかげで、私は実際に支援に感謝、

<!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の又はgetElementByIdをのようなDOMメソッドは要素が見つからない?](http://stackoverflow.com/questions/14028959/why-does-jquery -or-a-dom-method-like-getelementbyid-not-find-the-element) – Xufox

答えて

2

動かす。スクリプトが実行されると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

関連する問題