Non Modal Alert Messages in java script, activated by a button

Question

I am having trouble making the non modal alert appear when the button is pressed using java script.. Any help would go a long way!

<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>

change all getElementById("message1") as getElementById("messageone") — caslaner, Nov 25 '14 at 17:26
`document.getElementById("message1")`: There is no element with id `message1`, only `messageone`. — haim770, Nov 25 '14 at 17:26

score 0 · Answer 1 · answered Nov 26 '14 at 22:07

The problem with your code is that your function is not available globally. You have to add your function to window object. e.g. window.message1 = message1

The following code is doing what you need. You can find the same code at jsFiddle here.

I'm also recommending to use jQuery because it's a lot easier to attach click handlers. But for easy stuff it's OK like you're doing it.

(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>

Non Modal Alert Messages in java script, activated by a button

1 Answers1