CODEWITHSUNDEEP
javascripthtml
SA.
SA.

Reputation: 752

javascript in html

i am using javascript to change the text of div tag on run time.

how can this be done..

my div tag is as:

<div id="topdiv" style="color:Blue" onmouseover="button1();">
    <input type="button" id="btndiv"  onclick="edit1();"/>
     Div Tag
    </div>

i wnt the user to input text on runtime in div and that should be displayed in div. can someone help me..

Upvotes: 0

Views: 165

Answers (10)

Arulmurugan
Arulmurugan

Reputation: 107

Your file

<div id="topdiv" style="color:Blue" onmouseover="button1();"> Div Tag</div>
<form><input type="button" id="btndiv" value="Edit" onClick="window.open('t2.html','popuppage','width=850,toolbar=1,resizable=1,scrollbars=yes,height=700,top=100,left=100');" value="Open popup"/></form>

t2.html file

function sendValue (s){var selvalue = s.value;window.opener.document.getElementById('topdiv').innerHTML = selvalue;window.close();}

<form name="selectform"><input name="details" value=""><input type=button  value="Copy input to parent opener" onClick="sendValue(this.form.details);"></form>

Got Idea from this source enter link description here

Upvotes: 0

immutabl
immutabl

Reputation: 6903

In standard JavaScript usage you'd do as per @DarinDimitrov 's answer.

document.getElementById("topdiv").innerHTML = ('hello');

Once you're happy with JavaScript I would suggest you look at the JQuery libraries - the powerful syntax will let you write short, neat code like this:

$("#topdiv").html('hello');

Upvotes: 0

Mic
Mic

Reputation: 25154

You should use references instead of ID's, using this.
In that case this means the node that triggers the event.

<div style="color:Blue" onmouseover="button1(this);">
    <input type="button" onclick="edit1(this);"/>
    Div Tag
</div>

function button1(divRef){
  //divRef is the reference to the DIV
}
function edit1(inputRef){
  //inputRef is the reference of the INPUT
  //inputRef.parentNode is the reference to the DIV
}

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

function edit1() {
    alert('you are in edit1');
    document.getElementById('topdiv').innerHTML = 'hello';
}

and with proper error handling:

function edit1() {
    alert('you are in edit1');
    var topDiv = document.getElementById('topdiv');
    if (topDiv != null) {
        topDiv.innerHTML = 'hello';
    } else {
        alert('topdiv is nowhere to be found in this DOM');
    }
}

Upvotes: 2

Leon Tayson
Leon Tayson

Reputation: 4991

you should use

document.getElementById('topdiv').innerHTML = 'hello';

Upvotes: 1

Boldewyn
Boldewyn

Reputation: 82734

To get the div you should use document.getElementById('topdiv'). There is indeed a WebKit feature, that elements with an ID are automatically expanded as global variables, but it's highly questionable, that this becomes mainstream.

Then, innerHTM should read innerHTML, and you assign directly:

foo.innerHTML = "hi there"

Upvotes: 1

Ibu
Ibu

Reputation: 43810

function edit1() {
        alert('you are in edit1');
        document.getElementById('topdiv').innerHTML = 'hello';
    }

This should work by specifying the id

Upvotes: 0

Quentin
Quentin

Reputation: 943108

  1. You don't get a magic variable just by having an element with an id. var something = document.getElementById('some-id')
  2. The property is called innerHTML not innerHTM
  3. innerHTML is a string variable not an function. Assign a value to it with =, don't try to call it with ()

Upvotes: 2

Scizor_g45
Scizor_g45

Reputation: 152

Try document.getElementById('topdiv').innerHTML = "Hello"

Upvotes: 1

gnur
gnur

Reputation: 4733

It should be innerHTML. innerHTM is not a javascript function.

Upvotes: 3

Related Questions