gpt4 book ai didi

javascript - java脚本中的非模态警报消息,由按钮激活

转载 作者:太空宇宙 更新时间:2023-11-03 17:52:05 26 4
gpt4 key购买 nike

当使用 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>

最佳答案

您的代码的问题是您的函数在全局范围内不可用。您必须将函数添加到 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>

关于javascript - java脚本中的非模态警报消息,由按钮激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27132821/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com