onclick handler

Question

Here is my Javascript code:

function expand(element) {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "block";
    viewbox.innerHTML = "<h2 id='close' onclick='close()'>Х</h2><img id='inner_image' src='" + element.firstChild.src + "'>";   
}

function close() {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "none";
}

When I try to trigger the close event, the div with the id viewbox should disappear, but nothing happens. What did i do wrong?

here is code where expand() function is used

<div class="conatiner" onclick="expand(this)"><img class="image" width="650" src="images/pizza1.jpg" alt="pizza"></div>

and here is code where close() function should be used

<div id="viewbox" style="display: block;"><h2 id="close" onclick="close()">Х</h2><img id="inner_image" src="/images/image.jpg"></div>

How us how you trigger the functions in HTML or JS if there is more. — H.B., Mar 25 '18 at 11:04
Using JQuery might make whatever you're doing a little easier. — Tvde1, Mar 25 '18 at 11:04
yeah you need to show how you use your expand() and close() fns — davidluckystar, Mar 25 '18 at 11:05
edit the question instead iof posting code in the comment section , also use the snippest — Abslen Char, Mar 25 '18 at 11:07

score 3 · Accepted Answer · answered Mar 25 '18 at 11:43

Because you are using an onclick attribute, the browser is looking for something called close along a long chain of objects.

As a result, you are calling document.close instead of the global close variable you defined.

The quick hack to avoid this is to use a different name.

The safer option is to avoid using onclick attributes and switch to binding event handlers using JavaScript.

document.querySelector("#viewport h2").addEventListener("click", close);

(Aside: A close button is not a heading. Write semantic markup. Use a <button> and not an <h2> when you have something that is, conceptually, button).

Well done. Learned something new, not that i would ever use `onclick` and the like. — H.B., Mar 25 '18 at 11:46

score 0 · Answer 2 · answered Mar 25 '18 at 11:31

You can create your h2 element separately, attach event listener to it and then inject the element.

Here is how your function will look like:

function expand(element) {
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = "block";
  const h2 = document.createElement('h2');
  h2.id = 'close';
  h2.addEventListener('click', close);
  h2.innerText = 'X';
  viewbox.innerHTML = '';
  viewbox.appendChild(h2);
}

function close() {
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = "none";
}

document.querySelector('button').addEventListener('click', (e) => {
  expand(e);
})

<div id="viewbox"></div>
<button>Click</button>

matbou · Answer 3 · 2018-03-25T11:43:09.927

Are you sure you want to close the viewbox by clicking on the viewbox itself? The code below should do what you want; However, if you want a toggle button, then simply using an if statement in your expand function would allow you to toggle viewbox visibility each click.

function expand(){
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = 'block';
}

function contract(){
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = 'none';
}

*{
  box-sizing: border-box;
}

.container{
  padding: 50px;
  background-color: #efefef;
  
  width: 50%;
  
  text-align: center;
  font-size: 24px;
}

.container-expand{
  width: 50%;
  padding: 15px;
}

#viewbox{
  display: none;
  
  background-color: #fdfdfd;
}

<div class="container" onClick="expand()">Click To Expand</div>
<div id="viewbox" class="container-expand" onClick="contract()">I'm a view box with content. Click me to close.</div>

Here is an example of how to toggle the viewbox visibility using only the top button.

function toggleExpand(){
  let viewbox = document.getElementById('viewbox');
  if(viewbox.style.display === 'none'){
    viewbox.style.display = 'block';
  }
  else{
    viewbox.style.display = 'none';
  }
}

*{
  box-sizing: border-box;
}

.container{
  padding: 50px;
  background-color: #efefef;
  
  width: 50%;
  
  text-align: center;
  font-size: 24px;
}

.container-expand{
  width: 50%;
  padding: 15px;
}

#viewbox{
  display: none;
  
  background-color: #fdfdfd;
}

<div class="container" onClick="toggleExpand()">Toggle Expand</div>
<div id="viewbox" class="container-expand">I'm a view box with content. Click the toggle button again to close.</div>

score -1 · Answer 4 · answered Mar 25 '18 at 11:32

<div class="conatiner" onclick=expand(this)><img class="image" width="650" src="images/pizza1.jpg" alt="pizza"></div>
<div id="viewbox" style="display: block;"><h2 id="close" >Х</h2>
<img id="inner_image" src="http://pizza-funpage.ua/images/pizza1.jpg"></div>

I have implemented your close function using jquery. Hopefully, you can implement expand function by jquery as well.

function expand(element) {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "block";
    viewbox.innerHTML = "<h2 id='close' onclick='close()'>Х</h2><img id='inner_image' src='" + element.firstChild.src + "'>";   
}


$(document).ready(function(){

$(document).on('click','#close',function(){

  let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "none";
})
})

Jquery 2.2.4 version used.

onclick handler

4 Answers4