单击图像不会使用InnerHTML弹出div

时间:2017-10-06 11:49:42

标签: javascript html

这是我的情况:我根据条件创建了一个div。在那个创建的Div中,我有文字和图像。现在,当我单击该图像时,它必须弹出一个div(有一些高度和宽度)来显示图形。

我无法点击图片并显示弹出窗口。

这是我得到的错误:

dynamic_divs.html:263 Uncaught TypeError: Cannot read property 'style' of null
    at HTMLImageElement.dyn_img.onclick (dynamic_divs.html:263)
dyn_img.onclick @ dynamic_divs.html:263

这是我的Javascript代码:

  function createDiv() {
    var newctq_num = prompt("enter ctqnum");

    if (newctq_num > 77289 && newctq_num <= 77290) {
      var againnew_div = document.createElement("div"); // creation of new 
      div element

      againnew_div.style.backgroundColor = '#BE0A26';
      againnew_div.className = 'dynamicdiv';
      againnew_div.id = 'dynamicdiv';
      document.body.appendChild(againnew_div);

      var sentences_in_red_error = '<div <span class=\"errBig\">\n  <p> ERROR </p></span>\n<div>  <div <span class=\"smallCtq"\>\n <p>CTQ(N)</p></span>\n <div>     <div class="dynamic_graph_button"> <img id="dynamic_img" class="dynamic_img" src="C:/Users/skum/Documents/PQP-DOCS/graphicon3.png"  alt="Dynamic graph" <div id="dynamic_myModal" class="dynamic_modal"> <span class="dyn_close" onclick="document.getElementById("dynamic_myModal").style.display="none">&times;</span>  <img class="dyn_modal-content" id="dyn_modal-content"> <div> <div>';

      againnew_div.innerHTML = sentences_in_red_error;

      var dyn_modal = document.getElementById('dynamic_myModal');

      var dyn_img = document.getElementById('dynamic_img');
      var dyn_modalImg = document.getElementById('dyn_modal-content');

      dyn_img.onclick = function() {

        dyn_modal.style.display = "block";

      }

      var dyn_span = document.getElementsByClassName("dyn_close")[0];

      // When the user clicks on <span> (x), close the modal

      dyn_span.onclick = function() {
        dyn_modal.style.display = "block";
      }

      var my_elem = document.getElementById('orange_reach_limit_box');
      my_elem.parentNode.insertBefore(againnew_div, my_elem);

    }

0 个答案:

没有答案