ボタンをクリックしたときに追加ボタンが呼び出されない

Question

userscriptにformという2つの入力要素を追加しました。最初の要素はtextareaで、2番目の要素はbuttonです。彼らは、ローカル/静的なページで完全に正常に動作しますが、私はfunction uuid()を呼び出す必要がありますbuttonをクリックしようとすると、何も起こりません。

編集：私は言及を忘れてしまった何かが、このuserscriptはので、多分ロードタイミングに問題がある要素を編集/追加し、別のuserscriptと一緒に動作するはずということです。

作業スクリプトを編集

var qrform, rbutton, milliseconds, randomnumber, css; 
css = document.createElement("style"); 
css.type = "text/css"; 
/*jshint multistr: true */ 
css.innerHTML = "#rb{\ 
    display: -webkit-flex;\ 
    display: flex;\ 
    -webkit-align-items: stretch;\ 
    align-items: stretch;\ 
    height: 25px;\ 
    margin-top: 1px;\ 
    text-transform: uppercase;\ 
    font-size: 10px;\ 
    }\ 
    #rb #uform + input {\ 
    text-transform: uppercase;\ 
    font-size: 10px !important;\ 
    }\ 
    #uform{\ 
    width:95%;\ 
    text-align:center;\ 
    }\ 
    "; 
document.body.appendChild(css); 
qrform = document.getElementById("qr").getElementsByTagName("form")[0]; 
rbutton = document.createElement('div'); 
rbutton.setAttribute("id", "rb"); 
qrform.appendChild(rbutton); 
rbutton.innerHTML = "<input id=\"uform\" type=\"text\" name=\"UUID\" placeholder=\"UUID\" readonly><input type=\"button\" value=\"GENERATE\" onclick=\"uuid()\">"; 

function uuid() { 
    milliseconds = Date.now(); 
    randomnumber = Math.floor(Math.random() * 365 * 86400000); 
    document.getElementById("uform").value = milliseconds - randomnumber; 
    document.getElementById("uform").readOnly=true; 
} 

---

：私は、これはスクリプトである

..私は、ページがロードさが、私はまだ問題を抱えているために完了したときにロードするuserscript私のカスタムを作る問題を解決したと思いました：

var qrform, rcontainer, rbutton, parentrbutton, milliseconds, randomnumber, css; 
css = document.createElement("style"); 
css.type = "text/css"; 
/*jshint multistr: true */ 
css.innerHTML = "#rb{\ 
    display: -webkit-flex;\ 
    display: flex;\ 
    -webkit-align-items: stretch;\ 
    align-items: stretch;\ 
    height: 25px;\ 
    margin-top: 1px;\ 
    text-transform: uppercase;\ 
    font-size: 10px;\ 
    }\ 
    #rb #uform + input {\ 
    text-transform: uppercase;\ 
    font-size: 10px !important;\ 
    }\ 
    #uform{\ 
    width:95%;\ 
    text-align:center;\ 
    }\ 
    "; 
document.body.appendChild(css); 
qrform = document.getElementById("qr").getElementsByTagName("form")[0]; 
rcontainer = document.createElement('div'); 
rcontainer.setAttribute("id", "rb"); 
qrform.appendChild(rcontainer); 
rcontainer.innerHTML = "<input id=\"uform\" type=\"text\" name=\"UUID\" placeholder=\"UUID\" readonly>"; 
rbutton = document.createElement('input'); 
rcontainer.appendChild(rbutton); 
rbutton.setAttribute("type", "button"); 
rbutton.setAttribute("value", "generate"); 
rbutton.addEventListener('click', uuid); 

function uuid() { 
    milliseconds = Date.now(); 
    randomnumber = Math.floor(Math.random() * 365 * 86400000); 
    document.getElementById("uform").value = milliseconds - randomnumber; 
    document.getElementById("uform").readOnly=true; 
} 

Answer 1

ボタンをクリックしたときに発生するエラーはありますか？ あなたは、ボタンを挿入する前に関数を定義してみてください可能性があります。しかし、一般的にインラインonclickを使用するのは悪い習慣と考えられています。イベントハンドラを追加する方が良いでしょう。

var button = document.createElement('button') 
button.addEventListener('click', uuid)