0

私は仕事で非常に冗長なタスクを自動化しようとしている初心者のプログラマーです。
フォーム要素とテキスト ボタンを挿入したいのですが、正しい方法が見つかりません。

ここに私が持っているものがあります:

//function stuff

var searchyText = document.createElement("TEXTAREA");
var searchyDiv = document.createElement("P");
    searchyDiv.innerHTML="<p><a href='#' onClick='searchyTimeGo()'>Click to Search</a></p>";

document.forms[0] ... ?

//    document.insertBefore(searchyDiv, document.forms[0]);
//    document.insertBefore(searchyText, searchyDiv);


疑問符は私が迷子になった場所であり、下部のコメントはこれまでの試みの失敗した結果です。

ページにテキストを表示することはできません。私はいくつかのビデオ チュートリアルを見て、ノードについて正確に知っていることに気付きました。ページには 1 つのフォームしかありません。

生の HTML をform[0].innerHTML.
それをしようとしても汚く醜く感じましたが、それでもうまくいきませんでした。

上記の方法がおそらく失敗することは承知してonClickいますが、それを修正する方法は知っています。

お時間をいただきありがとうございます！

4

1 に答える 1

1

いくつかのこと：

  • フォームが AJAX (javascript) 経由で追加されている可能性はありますか?

  • document.querySelector()DocまたはjQueryを使用して、フォーム (またはその他のもの) を取得します。これにより、 CSS セレクターの柔軟な機能が得られます。

  • 要素の場合、を別の<p>要素に設定しないでくださいinnerHTML<p>

  • searchyTimeGo()ページまたはスクリプトによって定義されていますか? あなたの場合は、決して、決してonclick、 （または同様のものを）使用しないでください。

  • 名前searchyDivが付いていますが、段落 ( <p>) を作成しています。

  • フォームにではなく、フォームの前に要素を追加しようとしているように見えますか?

  • DOM メソッドを使用します。innerHTML, の使用は原則として避けてください。


すべてをまとめると、コードは次のようになります (AJAX がない場合):

//-- This gets the FIRST form.
var targForm    = document.querySelector ("form");
if (targForm) {
    var searchyText = document.createElement ("TEXTAREA");
    var searchyDiv  = document.createElement ("DIV");
    var searchyPghp = document.createElement ("P");
    var searchyBtn  = document.createElement ("A");

    searchyBtn.textContent  = "Click to Search";
    searchyBtn.href         = "#";

    searchyBtn.addEventListener ("click", searchyTimeGo,   false);

    searchyDiv.appendChild  (searchyPghp);
    searchyPghp.appendChild (searchyBtn);

    targForm.parentNode.insertBefore (searchyText, targForm);
    targForm.parentNode.insertBefore (searchyDiv, targForm);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}


または、 jQueryの方法を示す完全なスクリプト:

// ==UserScript==
// @name     _Add custom form elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var firstForm = $("form:first");
if (firstForm.length) {
    firstForm.insertBefore (
          '<textarea id="gmMyTextArea"></textarea>'
        + '<div id="gmMySrchDiv"><p><a href="#">Click to Search</a></p></div>'
    );

    $("#gmMySrchDiv > p > a").on ("click", searchyTimeGo);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}
于 2013-05-31T08:34:17.127 に答える