Affecting whole div block with ondblclick function

Question

I have recently started learning DOM and I have seen some examples of it, however, I'm trying to make a function (getting id) which would trigger after being double clicked.

This is the CSS, HTML and JavaScript codes I'm using.

function getID() {
  var x = document.getElementsByClassName("blueblock")[0].id;
  document.getElementById("xx").innerHTML = x;

.blueblock {
  width: 30%;
  height: 50vh;
  float: left;
  background-color: lightblue;
  text-align: justify;
  overflow: auto;
}

<p id="xx" ondblclick="getID()">
  <div class="blueblock" id="bluebl">
    <p>Just some text inside of the block.</p>
  </div>

How should I change my code so that clicking on any part of the blueblock would trigger the function and output the id value?

score 0 · Answer 1 · answered Dec 12 '20 at 21:17

You need to have valid html element nesting, and you should probably accomodate for more than one of these sections. Here is an example.

function getID(el) {
 var x = el.getElementsByClassName("blueblock")[0].id;
  document.getElementById(el.id).innerHTML = x;
  }

.blueblock {
    width:30%;
    height:50vh;
    float:left;
    background-color:lightblue;
    text-align:justify;
    overflow:auto;
}

<div id="xx" ondblclick="getID(this)">
  <div class="blueblock" id="bluebl">
    <p>Just some text inside of the block.</p>
  </div>
</div>
<div id="xx2" ondblclick="getID(this)">
  <div class="blueblock" id="bluebl2">
    <p>Just some more text inside of the block.</p>
  </div>
</div>

score 0 · Accepted Answer · answered Dec 12 '20 at 21:18

This happens because the <p> tag you have does not have a content. If you would add text to the <p> and double click the text it will work.

The solution for this is to use div instead of p:

function getID() {
  var x = document.getElementsByClassName("blueblock")[0].id;
  document.getElementById("xx").innerText = x;
}

.blueblock {
  width: 30%;
  height: 50vh;
  float: left;
  background-color: lightblue;
  text-align: justify;
  overflow: auto;
}

<div id="xx" ondblclick="getID()">
  <div class="blueblock" id="bluebl">
    <p>Just some text inside of the block.</p>
  </div>
</div>

score 0 · Answer 3 · answered Dec 12 '20 at 21:59

The first p element is basically terminated by the next div element because a p (paragraph equivalent) cannot contain divs. Hence the double click code is not seen because effectively the first p element has no content.

Replacing that p element by a div, and terminating correctly, means that anything within the div will lead to the double click being seen.

However, note that ondblclick is not supported by all browsers (see https://caniuse.com/?search=ondblclick) so we replace that by adding an event listener to the element using Javascript.

Here is the complete snippet. Note that when you have double clicked the innerHTML gets replaced and therefore if you doubleclick again you will see an error in your browser's console as the element cannot be found - it is no longer there.

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script>
    function getID() {
      var x = document.getElementsByClassName("blueblock")[0].id;
      document.getElementById("xx").innerHTML = x;
      }
  </script>
  <style>
   .blueblock {
      width: 30%;
      height: 50vh;
      float: left;
      background-color: lightblue;
      text-align: justify;
      overflow: auto;
   }
  </style>
</head>
<body>
<div id="xx">
  <div class="blueblock" id="bluebl">
    <p>Just some text inside of the block.</p>
  </div>
  </div>
<script>
  document.getElementById('xx').addEventListener('dblclick',getID);
</script>
</body>
</html>

Affecting whole div block with ondblclick function

3 Answers3