Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

DOM w/ Javascript:  Access <h1> inner tag text for modification.

Posted on 2005-02-24
4
Medium Priority
?
5,312 Views
Last Modified: 2013-11-19
Hello.  I'd like to know of a way to access the text contents of a header tag (or any other tag other than textarea) using the HTM DOM.  As in:  <h1>Text I want to Access</h1>

In the example I've provided below, there are two modes for a form; edit mode and create.  When an anchor's link is clicked, the mode will be switched.  Assume the form would tie into a database & that in edit mode the form would be populated automatically.  Just setting a context for the example -- the form is really besides the point as all that's necessary is accessing the <h1> contents.  The header tag has an ID to allow for accessing it using JS's getElementById().


<!----------------------CODE BEGINS------------------------------------>
<script language="javascript">
function flipActionMode( ) {
      var h1Loc = document.getElementById("modetitle");
      if( h1Loc.text == "Edit" ) {
            document.frm1.mode.value = "create";      //form element to track mode

            //repeated failed attempts to access the h1 field and modify it's inner text
            h1Loc.text = "Create";
            h1Loc.value = "Create";
      } else {
            document.frm1.mode.value = "edit";        //form element to track mode

            //repeated failed attempts to access the h1 field and modify it's inner text
            h1Loc.text = "Edit";
            h1Loc.value = "Edit";
      }
}
</script>

<a href="javascript:flipActionMode();">Switch between Create/Edit mode</a>

<h1 id="modetitle">Edit</h1>
<!--Form for editing/adding-->
<form name="frm1" method="post" action="">
Data for submission: <input type="text" name="data" /><br />
field to track mode (will be hidden after debugging)<input type="text" name="mode" value="edit" />
</form>
<!----------------------CODE ENDS------------------------------------>

Accessing and editing an input field's value is straightforward and toggles appropriately in the example in IE; I'm unsure that the DOM specifies a method to access content between tags other than textarea (with <textarea>Text</textarea>, Text is accessable through the field's .value attribute).  I'm looking forward to hearing if any of you know more about the DOM's ability to specify this value.

Also, please, no work arounds such as using two <h1>tags and toggling visibility -- while this would work, I'm asking specifically about the DOM and how to access text between tags, rather than an explicit solution to the example I provided.  Thanks!
0
Comment
Question by:minnirok
  • 3
4 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13397301
document.getElementById('modetitle').innerHTML = 'New title';

or

document.getElementById('modetitle').innerText = 'New title';
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13397316
Repeat

h1Loc.text = "Edit";
h1Loc.value = "Edit";

with

h1Loc.innerHTML = "Edit"

The same for "Create"


0
 
LVL 7

Author Comment

by:minnirok
ID: 13397456
Thanks, Batalf.

A working version of the example would be as follows, for those curious whom it might help:

<!----------------------CODE BEGINS------------------------------------>
<script language="javascript">
function flipActionMode( ) {
      var h1Loc = document.getElementById("modetitle");
      var mode;
      if( h1Loc.innerHTML == "Edit" ) {
            mode = "Create";
            document.frm1.mode.value = mode;      //form element to track mode
            h1Loc.innerHTML   = mode;      //set the h1 Title
      } else {
            mode = "Edit";
            document.frm1.mode.value = mode;      //form element to track mode
            h1Loc.innerHTML   = mode;      //set the h1 Title
      }
}
</script>

<a href="javascript:flipActionMode();">Switch between Create/Edit mode</a>

<h1 id="modetitle">Edit</h1>
<!--Form for editing/adding-->
<form name="frm1" method="post" action="">
Data for submission: <input type="text" name="data" /><br />
<input type="submit" name="mode" value="Edit" />
</form>
<!----------------------CODE ENDS------------------------------------>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13398014
Glad I could help!

Thanks for the "A"

Batalf
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question