?
Solved

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

Posted on 2005-02-24
4
Medium Priority
?
5,306 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

752 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