java脚本中的非模态警报消息，由按钮激活答案

【问题标题】：Non Modal Alert Messages in java script, activated by a buttonjava脚本中的非模态警报消息，由按钮激活
【发布时间】：2014-11-25 17:18:20
【问题描述】：

当使用 java 脚本按下按钮时，我无法显示非模态警报。任何帮助都会大有帮助！

<html>
<head>
<title> Non-Modal Alert Messages</title>
                <script type = "text/javascript">
                        function message1 (msg) {
                            document.getElementById("message1").style.display = "block";
                            document.getElementById('msg').innerHTML = msg;
                        }

                        function messageHide() {
                                document.getElementById('message1').style.display= "none";
                        }
                </script>
</head>
<body>

<div id = "messageone"></div>

<input type="button" value = "message1" onclick = "message1('Hello!! ');">
<input type="button" value = "message2" onclick = "message1('How are you?');">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

</body>
<html>

【问题讨论】：

将所有getElementById("message1")改为getElementById("messageone")
document.getElementById("message1")：没有id为message1的元素，只有messageone。
不幸的是，警报仍然没有弹出！

标签： javascript html css function button

【解决方案1】：

您的代码的问题是您的函数在全球范围内不可用。您必须将函数添加到 window 对象。例如window.message1 = message1

以下代码正在执行您需要的操作。您可以在 jsFiddle here 找到相同的代码。

我还推荐使用 jQuery，因为它更容易附加点击处理程序。但是对于简单的东西，就像你正在做的那样没关系。

(function() {
  var msgDiv = document.getElementById('msg');

  function getStyle(id, name) {
    var element = document.getElementById(id);
    return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
  }

  function message(msg) {
    msgDiv.style.display = "block";
    msgDiv.innerHTML = msg;
  }

  function messageHide() {
    msgDiv.style.display = "none";
  }

  function messageToggle() {
    var display = getStyle('msg', 'display'); // required to get computed css style if accessed directly you would get an empty string back at first click
    // see http://stackoverflow.com/questions/16748813/mydiv-style-display-returns-blank-when-set-in-master-stylesheet
    msgDiv.style.display = (display == 'none') ? 'block' : 'none';
  }

  // make your function avaible globally
  window.message = message;
  window.messageToggle = messageToggle;
})();

#msg {
  display: none;
}

<div>
  <input type="button" value="message1" onclick="message('Hello!! ');" />
  <input type="button" value="message2" onclick="message('How are you?');" />
  <button onclick='messageToggle()'>Toggle message</button>
  <div id="msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum</div>
</div>

【讨论】：