CODEWITHSUNDEEP
javascripthtml
hac13
hac13

Reputation: 73

Why does my javascript code not not pass on the value from one div to another?

My goal is to take the value from one div and display it in another.

Here is the relevant html code:

<div id="main">
    hello
</div>

The following is the function I have, which should take the number from the div I click on and display it in the div with the id 'main'.

function clr(e) {
  var clickedElement = document.getElementById(e.currentTarget.id);
  var currentXValue = clickedElement.innerHTML;    

  document.body.getElementById('main').innerHTML = currentXValue;
}

For some reason, the final line in the function does not do what I intend it to.

Upvotes: 0

Views: 68

Answers (4)

Hector Barbossa
Hector Barbossa

Reputation: 5528

Please change document.body.getElementById('main').innerHTML to document.getElementById('main').innerHTML and it should work fine.

Upvotes: 1

Anjul Garg
Anjul Garg

Reputation: 584

You can do something like this using Jquery.

$('div').click(function () {
  $('#main').html($(this).html());
});

Here is a Jsfiddle: https://jsfiddle.net/yuykhynm/1/

Upvotes: 0

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Here you go

function clr(e) {
  var clickedElement = document.getElementById(e.id);
  var currentXValue = clickedElement.innerHTML;    

  document.getElementById('main').innerHTML = currentXValue;// it should be document.getElementById not document.body
}
<div id="main">
   Hello
  </div>

<button onclick="clr(this)" id="Foo">Foo</button>

Upvotes: 2

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

Hi please check this link http://jsfiddle.net/hidoos/Lpz917vo/

<div id="outer">
  <div id="inner">heello</div>
</div>
<div id="result"></div>

and JS

var outer = document.getElementById('outer'),
    result = document.getElementById('result');

outer.addEventListener('click', function (e) {
  var html = '';
  if (e.target === outer && e.currentTarget === outer) {
    html += '<p>Outer element was clicked directly - it is <code>e.target</code> <em>and</em> <code>e.currentTarget</code>.</p>';
  }

  if (e.target !== outer && e.currentTarget === outer) {
    html += '<p>Outer element is the current target, but it was not clicked directly - it is <code>e.currentTarget</code>.</p>';
  }

  html += [
    '<ul>',
      '<li><code>e.target === &lt;div id="', e.target.id, '"&gt;</code></li>',
      '<li><code>e.currentTarget === &lt;div id="', e.currentTarget.id, '"&gt;</code></li>',
       '<li><code>e.currentTarget === &lt;div id="', e.currentTarget.innerHTML, '"&gt;</code></li>',
    '</ul>'
  ].join('');

  result.innerHTML = html;

});

u can add innerhtml

Upvotes: 0

Related Questions