向页面添加按钮

Question

我正在尝试在某些文本旁边添加一个按钮，点击该文本时会将地址放在Google地图上。问题是它只是添加我的按钮的文本，而不是按钮本身。

function googleMaps(address) { 
    GM_openInTab('https://maps.google.com/maps?q=' + address.replace(/ /g, '+')); 
} 

function addButtons() { 
    var mydiv   = document.querySelector('div[data-bind="CurrentJob.addr"]'); 
    var address  = mydiv.textContent + ", UT"; 
    mydiv.textContent = address + ' <input type="button" id="mapButton" value="Google Maps">'; 

    document.body.appendChild (mydiv.textContent); 
    document.getElementById ("mapButton").addEventListener ("click", googleMaps(address), false); 
} 

我确定它与第二条线有关系，但我对这个东西仍然很陌生。

---

更新代码：

的按钮被添加，但该事件在页面加载解雇。之后点击它什么都不做。

// ==UserScript== 
// @name Job Aids 
// @description Aid in closing tickets 
// @include https://techaccess.ad.qintra.com/WorkJobs/WorkJobs.aspx* 
// @namespace camzilla.net 
// @version  1.1.20121128 
// ==/UserScript== 

var url = window.location.href.split(".aspx"); 
var page = url[1].toLowerCase(); 

if (page == "#finaltest") { 
    window.addEventListener ("load", finalResults, false); 
} else if (page == "#threetoneslope") { 
    window.addEventListener ("load", toneSlopeResults, false); 
} else if (page == "#codes") { 
    window.addEventListener ("load", closingComments, false); 
} else if (page == "#cras") { 
    window.addEventListener ("load", crasResults, false); 
} else if (page == "#jobinfo") { 
    window.addEventListener ("load", addButtons, false); 
} 

function googleMaps(address) { 
    GM_openInTab('https://maps.google.com/maps?q=' + address.replace(/ /g, '+')); 
} 

function pollDSLAM(address) { 
    GM_openInTab('http://acmspjv1.interprise.com/cgi-bin/QC/DSL/dslam6100Int.pl?telephoneNum=' + address); 
} 

function addButtons() { 
    var mydiv = document.querySelector('div[data-bind="CurrentJob.addr"]'); 
    var address = mydiv.textContent + ", UT"; 
    var btn  = document.createElement("input"); 
    with (btn) { 
     id ='mapButton'; 
     type ='button'; 
     value ='Get Map'; 
     addEventListener("click", googleMaps(address), true); 
    } 
    mydiv.appendChild(btn); 

    mydiv = document.querySelector('div[data-bind="CurrentJob.cktid"]'); 
    btn  = document.createElement("input"); 
    with (btn) { 
     id ='dslButton'; 
     type ='button'; 
     value ='Poll Dslam'; 
     addEventListener("click", pollDSLAM(mydiv.textContent), true); 
    } 
    mydiv.appendChild(btn); 
} 

function setCookie(c_name, value, exdays) { 
    var exdate=new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
    document.cookie=c_name + "=" + c_value; 
} 

function getCookie(c_name) { 
    var i,x,y,ARRcookies=document.cookie.split(";"); 

    for (i=0;i<ARRcookies.length;i++) { 

     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); 
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); 
     x=x.replace(/^\s+|\s+$/g,""); 

     if (x==c_name) { 
      return unescape(y); 
     } 
    } 

    return null; 
} 

function finalResults() { 
    var dc, current, loss, noise, pi, lb; 

    dc  = getRandom(51, 49, 2); 
    current = getRandom(37, 29, 2); 
    loss = getRandom(7, 2, 2); 
    noise = getRandom(7, 1, 2); 
    pi  = getRandom(67, 60, 2); 
    lb  = getRandom(79, 70, 2); 

    document.getElementById('finalTestInsightNo').click(); 

    document.getElementById("finalTestBeforeAcTg").value  = "0.00"; 
    document.getElementById("finalTestBeforeAcRg").value  = "0.00"; 
    document.getElementById("finalTestBeforeAcTr").value  = "0.00"; 
    document.getElementById("finalTestBeforeDcTr").value  = dc; 
    document.getElementById("finalTestBeforeDcTg").value  = "0.00"; 
    document.getElementById("finalTestBeforeDcRg").value  = dc; 
    document.getElementById("finalTestBeforeLoopCurrent").value = current; 
    document.getElementById("finalTestAfterLoss").value   = loss; 
    document.getElementById("finalTestAfterNoise").value  = noise; 
    document.getElementById("finalTestAfterPi").value   = pi; 
    document.getElementById("finalTestAfterLb").value   = lb; 

    document.getElementById("finalTestAfterLb").focus(); 
    window.scrollTo(0, document.body.scrollHeight-250); 

    // Store cookies to be used on cras page if needed 
    setCookie("loss", loss, 1); 
    setCookie("pi", pi, 1); 
    setCookie("current", current, 1); 
    setCookie("noise", noise, 1); 
    setCookie("lb", lb, 1); 
} 

function crasResults() { 
    document.getElementById("crasCircuitLoss").value = getCookie("loss"); 
    document.getElementById("crasPowerInfluence").value = getCookie("pi"); 
    document.getElementById("crasLineCurrent").value = getCookie("current"); 
    document.getElementById("crasCircuitNoise").value = getCookie("noise"); 
    document.getElementById("crasBalance").value  = getCookie("lb"); 

    document.getElementById('crasFoundInF2').click(); 
} 

function toneSlopeResults() { 
    var dc = getRandom(51, 49, 2); 

    document.getElementById("ToneSlopeInsightNo").click(); 
    document.getElementById("ToneSlopeDmarcTaggedYes").click(); 
    document.getElementById("ToneSlopeClecDtPresentYes").click(); 

    document.getElementById("ToneSlopeBeforeDcTr").value = dc; 
    document.getElementById("ToneSlopeBeforeDcTg").value = "0.00"; 
    document.getElementById("ToneSlopeBeforeDcRg").value = dc; 
    document.getElementById("ToneSlopeRingbackTr").value = getRandom(90,85,2); 
    document.getElementById("ToneSlopeAfterResistTg").value = getRandom(998,20,0); 
    document.getElementById("ToneSlopeAfterResistRg").value = getRandom(998,20,0); 
    document.getElementById("ToneSlopeAfterResistTr").value = getRandom(998,20,0); 

    document.getElementById("ToneSlopeAfter404").value  = "0.00"; 
    document.getElementById("ToneSlopeAfter1004").value  = getRandom(7, 3, 2); 
    document.getElementById("ToneSlopeAfter2804").value  = "0.00"; 
    document.getElementById("ToneSlopeAfterNoise").value = getRandom(7, 1, 2); 
    document.getElementById("ToneSlopeAfterLb").value  = getRandom(79, 70, 2); 
    document.getElementById("ToneSlopeCotName").value  = "NA"; 

    document.getElementById("ToneSlopeTn").focus(); 
} 

function closingComments() { 
    document.getElementById("flatRateJacks").value = "0"; 
    document.getElementById("rewiredJacks").value = "0"; 

    document.getElementById("tripNo").click(); 
    document.getElementById("marketMass").click(); 
    document.getElementById("custTypeRes").click(); 
    document.getElementById("pairChangeNo").click(); 
    document.getElementById("tempDropNo").click(); 
    document.getElementById("goodCbrYes").click(); 

    document.getElementById("jobCloseComments").focus(); 
    window.scrollTo(0, 5000); 
} 

function getRandom(max, min, tenths) { 
    var result = min + (Math.random() * (max - min + 1)); 
    return result.toFixed(tenths); 
} 

另一方面，我必须刷新页面才能加载。如果必须的话，我会再发一篇文章，但我想知道如何检测这个页面加载。这一切都在我们的安全网络上，您可以通过点击按钮来到这里。

Answer 1

var btn=document.createElement("button"); 
btn.id='mapButton'; 
btn.value='Google Maps'; 
btn.addEventListener("click", googleMaps(address), false); 
myDiv.appendChild(btn); 

但是侧面说明...我注意到你的标签有错误，这可能是你的问题。没有<input>与type='button'它应该是<button id="mapButton" value="Google Maps">

希望有所帮助。