How to call a JavaScript function that displays a block of code with custom message?

Question

What I want is to call the showPopup('text goes here'); function and the below block of code to be shown with my text in it.

How can I achieve this?

function showPopup(data) {

}


    <a class="fragment" href="#">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
  <div class="content">
    // I WANT TO PUT MY TEXT HERE
  </div>
    </a>

You need to append the HTML into the body and then style it with CSS. You could put some timeout on it so the message dissappears after some period. — com2ghz, May 12 '15 at 14:38
possible duplicate of [How to append data to div using javascript?](http://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript) — Seth McClaine, May 12 '15 at 14:55

score 0 · Accepted Answer · answered May 12 '15 at 14:40

0

JSFiddle example: http://jsfiddle.net/tb5musm6/

function showPopup(data) {
    var elem = document.getElementsByClassName('content');
    elem[0].innerHTML = data;
}

showPopup('asdf');

document.getElementsByClassName will return an array of elements with the given classname

innerHTML variable holds all content between tags

answered May 12 '15 at 14:40

Seth McClaine

9,142
6
38
64

Hi, can you please tell me how to have the div hidden and appeared only when the function is called ? – EnexoOnoma May 13 '15 at 13:46
If you're working with the same element, set `.content{ display:none }` in css. Then add `elem[0].style.display='initial';` to the end of the js function (JSFiddle: http://jsfiddle.net/tb5musm6/1/) – Seth McClaine May 13 '15 at 13:51
Thank you I changed it a bit to meet my requirements. Maybe it is a quick and dirty fix though.. jsfiddle.net/tb5musm6/2 – EnexoOnoma May 13 '15 at 13:57
I have a problem after adding your addition.. if you click on the X button it removes the whole page http://jsfiddle.net/ntqr3ubx/ but didn't happen in here http://jsfiddle.net/xftr5/749/ – EnexoOnoma May 13 '15 at 14:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77725/discussion-between-seth-mcclaine-and-xalloumokkelos). – Seth McClaine May 13 '15 at 14:20
No, the first link is my attempt after including your function, and the second link is the example that i took for the modal window. if you click X on the modal window of the second link, the window will be hidden. In the first link, the window will be hidden but also the whole page content – EnexoOnoma May 13 '15 at 14:21

score -1 · Answer 2 · answered May 12 '15 at 14:38

-1

Add an id to you div so you can find it easier.

Then, use innerHTML to modify the content of the div.

<a class="fragment" href="#">
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
    <div class="content" id="content">
    // I WANT TO PUT MY TEXT HERE
    </div>
</a>

<script>
function showPopup(data) {
    document.getElementById('content').innerHTML(data);
}

showPopup('my text');
</script>

answered May 12 '15 at 14:38

FrancoisBaveye

1,902
1
18
25

Yeah, it's to make it easier. `getElementsByClassName('content')[0]` would work too – FrancoisBaveye May 12 '15 at 14:41
It's becoming standard to avoid utilizing id since they are expected to be unique which can be difficult to maintain in larger applications – Seth McClaine May 12 '15 at 14:44
Just like `getElementsByClassName('content')[0]` would not work if there is another `class="content"` before in the code. – FrancoisBaveye May 12 '15 at 14:46
no... it would still work, it just wouldn't give you results that you expect – Seth McClaine May 12 '15 at 14:47
There is a difference between programatic errors and logical errors – Seth McClaine May 12 '15 at 14:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77716/discussion-between-heru-luin-and-seth-mcclaine). – FrancoisBaveye May 13 '15 at 12:49

How to call a JavaScript function that displays a block of code with custom message?

2 Answers2