Affecting whole div block with ondblclick function

Question

Affecting whole div block with ondblclick function

168 Views Asked by xdarkestshadow At 21 October 2024 at 01:34

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?

Original Q&A

There are 3 best solutions below

Nikki9696 On 12 December 2020 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>

A Haworth On 12 December 2020 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>

**Omri Attiya** · Accepted Answer

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>

Affecting whole div block with ondblclick function

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOM

Related Questions in ONDBLCLICK

Trending Questions

Popular # Hahtags

Popular Questions