带有 InnerHTML 的 Javascript 函数不起作用答案

【问题标题】：Javascript function with InnerHTML doesn't work带有 InnerHTML 的 Javascript 函数不起作用
【发布时间】：2017-02-27 02:56:32
【问题描述】：

我正在尝试使用 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>

它会打开带有文本和所有内容的功能，但是当我按下确定时，它不会重定向我。

【问题讨论】：

粘贴您的完整代码。
dialogoverlay,dialogbox ID 丢失
您粘贴的代码有语法错误，特别是未转义的引号。
您为确定按钮生成的 HTML 不正确。它看起来像<button onclick='Alert.ok('...')'>OK</button>。你能看出哪里不对吗？（如果没有，请检查浏览器中的元素）。
@SumonSacker：那仍然无法生成正确的 HTML。

标签： javascript function innerhtml

【解决方案1】：

这是代码，你可以试试

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

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

  this.close = function(){
	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>

注意：将此代码用于您的脚本。因为，In Snippet window.location 函数将不起作用。

【讨论】：

【解决方案2】：

试试下面的代码：

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="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"></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();

<div id="dialogoverlay">
  <div id="dialogbox">
    <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>

【讨论】：