使用InnerHTML的Javascript函數不起作用

Question

我正在嘗試使用javascript進行自定義提醒，在放置函數時，您要將其重定向到哪裏。這是我有：

function CustomAlert(){ 
this.render = function(dialog, redirect){ 
var winW = window.innerWidth; 
var winH = window.innerHeight; 
var dialogoverlay = document.getElementById('dialogoverlay'); 
var dialogbox = document.getElementById('dialogbox'); 
dialogoverlay.style.display = "block"; 
dialogoverlay.style.height = winH+"px"; 
dialogbox.style.left = (winW/2) - (550 * .5)+"px"; 
dialogbox.style.top = "100px"; 
dialogbox.style.display = "block"; 

dialogbox.innerHTML = "<div id='dialogboxhead'><img src="/images/logo.png"></img></div> + 
    "<div id='dialogboxbody'>" + dialog + "</div>" + 
    "<div id='dialogboxfoot'><div class='alertokbtn'><button onclick='Alert.ok('" + redirect + "')'>OK</button></div></div>"; 

} 
this.ok = function(redirect){ 
document.getElementById('dialogbox').style.display = "none"; 
document.getElementById('dialogoverlay').style.display = "none"; 

window.location = redirect; 
} 
} 
var Alert = new CustomAlert(); 

這是我在HTML我建立運行功能：

<div id="dialogoverlay"></div> 
<div id="dialogbox"> 
    <div> 
    <div id="dialogboxhead"></div> 
    <div id="dialogboxbody"></div> 
<div id="dialogboxfoot"></div> 
</div> 
</div>  

<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button> 

它打開與文本和一切功能，但是當我按OK，它不會重定向我。

Answer 1

下面是代碼，您可以嘗試

function getObj(ID){ 
 
    return document.getElementById(ID); 
 
} 
 

 
function CustomAlert(){ 
 
    this.render = function(dialog, redirect){ 
 
\t getObj('dialogoverlay').style.display = 'block'; 
 
\t getObj('dialogboxbody').innerHTML = dialog; 
 
\t getObj('dialogboxfoot').innerHTML = "<button id=\"left\" onclick=\"Alert.ok('"+redirect+"')\">OK</button> <button id=\"right\" onclick=\"Alert.close()\">Close</button>"; 
 
    } 
 
    this.ok = function(redirect){ 
 
\t window.location = redirect; 
 
    } 
 

 
    this.close = function(){ 
 
\t getObj('dialogoverlay').style.display = "none"; 
 
    } 
 
} 
 
var Alert = new CustomAlert();

body{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#dialogoverlay{ 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    background: rgba(0,0,0,.2); 
 
    display: none; 
 
    text-align: center; 
 
} 
 
#dialogbox{ 
 
    z-index: 9999; 
 
    width: 300px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    background: white; 
 
    margin: 100px auto; 
 
} 
 
#dialogboxhead img{ 
 
    width: 100px; 
 
    margin: 30px 10px 10px 10px; 
 
} 
 
#dialogboxfoot{ 
 
    overflow: hidden; 
 
    background: rgba(0,0,0,.1); 
 
    padding: 5px; 
 
} 
 
#left{ 
 
    float: left; 
 
} 
 
#right{ 
 
    float: right; 
 
}

<div id="dialogoverlay"> 
 
    <div id="dialogbox"> 
 
    <div> 
 
     <div id="dialogboxhead"> 
 
     <img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/> 
 
     </div> 
 
     <p id="dialogboxbody"></p> 
 
     <div id="dialogboxfoot"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button>

注意：使用此代碼添加到您的腳本。因爲，在代碼段window.location功能不起作用。

Answer 2

試試下面的代碼：

function CustomAlert(){ 
 
    this.render = function(dialog, redirect){ 
 
\t var winW = window.innerWidth; 
 
\t var winH = window.innerHeight; 
 
\t var dialogoverlay = document.getElementById('dialogoverlay'); 
 
\t var dialogbox = document.getElementById('dialogbox'); 
 
\t dialogoverlay.style.display = "block"; 
 
\t dialogoverlay.style.height = winH+"px"; 
 
\t dialogbox.style.left = (winW/2) - (550 * .5)+"px"; 
 
\t dialogbox.style.top = "100px"; 
 
\t dialogbox.style.display = "block"; 
 

 
\t dialogbox.innerHTML = `<div id='dialogboxhead'><img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"></img></div> 
 
\t \t \t \t <div id='dialogboxbody'>${dialog}</div> 
 
\t \t \t \t <div id='dialogboxfoot'><div class='alertokbtn'><button onclick='Alert.ok("${redirect}")'>OK</button></div></div>`; 
 

 
\t } 
 
\t this.ok = function(redirect){ 
 
\t \t document.getElementById('dialogbox').style.display = "none"; 
 
\t \t document.getElementById('dialogoverlay').style.display = "none"; 
 

 
\t \t window.location = redirect; 
 
\t } 
 
\t } 
 
\t var Alert = new CustomAlert();

<div id="dialogoverlay"> 
 
\t <div id="dialogbox"> 
 
\t \t <div id="dialogboxhead"></div> 
 
\t \t <div id="dialogboxbody"></div> 
 
\t \t <div id="dialogboxfoot"></div> 
 
\t </div> 
 
</div> 
 
\t \t 
 
<button class="button" onClick="Alert.render('Alert test. This text can be anything by the way', 'https://google.com');" id="btn1">Get alert</button>