Member Avatar for Chokladkakan

I am new to Daniweb, but I have browsed the forum here for a while and it has often solved problems of mine, so now that I encountered a pickle which I cannot seem to solve in a satisfactory way using only googling, I'm asking for some hands on help:

While I am an amateur beginner when it comes to JavaScript, I feel that I can at least handle the scripting language to a level which suits my needs, however earlier today a friend asked me if I could lead her to the right direction with a class task of hers. Basically, the project at hand is to create a snippet of JavaScript which, when the user clicks the content of an HTML paragraph element, should replace said paragraph with a <textarea> and allow the user to alter the paragraph's content. Of course the textarea should be accompanied by a save and a cancel button, but seeing as it is a JavaScript class she's taking, the saving shall only be client-sided.

However, the catch is that she will not be allowed to use the innerHTML property.

So, to the question: how would one go (if it is possible, but I highly doubt it isn't) with making something like

var x = document.getElementById("id").innerHTML;

work the very same way, just not using innerHTML?

PS. I do feel this could be done in a more smooth looking and operating way by using the contentEditable attribute, but apparently the teacher asked for a textarea.

Thanks in advance for any help or constructive comments,
Jakob

Edited by Chokladkakan because: n/a
  • 2 Contributors
  • 6 Replies
  • 131 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Chokladkakan

Recommended Answers

All 6 Replies

Member Avatar for fxm

To do this in a perfectly general way you would need to know quite a bit about the DOM and the differences between IE and other browsers.

To do it in exercise you need only make one assumption: that the first child of the <p> to be changed is a non-null text node (which it will be, if you make it so).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <p>
      this is a test
    </p>
  <script type="text/javascript">
      var cPs = document.getElementsByTagName('p')
      cPs[0].firstChild.data='replacement text'
  </script>
  </body>
</html>

Note: changing .data isn't really much 'better' than changing .innerHTML. It could be that the whole point of the exercise is to use createTextNode in conjunction with either replaceChild or deleteChild/appendChild.

Also: for this toy I took advantage of the fact that the <p> to be changed occurs first in the page.

Finally: if you aren't comfortable with getElementsByTagName() collections, you could of course get the object reference using getElementById() instead.

Member Avatar for Chokladkakan

I am off to bed now, but running the script my friend threw together with my help with this applied seem to work fine! I shall have a better look tomorrow and see if there's any kinks happening when you try and play around with it.

Thanks a lot for the fast and constructive response, fxm, and good night!

Member Avatar for fxm

Thanks a lot for the fast and constructive response

You're welcome. Remember to click 'solved'. And don't forget the up-arrow. :)

Member Avatar for Chokladkakan

I seem to have encountered something which doesn't seem to fit seamlessly into the solution fxm gave me before. It is probably just a matter of me not having too much knowledge of the DOM model, but at the moment I don't seem to understand the problem.

Anyway, I have something that looks like this:

var y = document.createElement('P');

Of course it doesn't have to be a paragraph there, but let's say that for the example.

Anyway, my assumption what that instead of now writing

y.innerHTML = 'whatever';

I could use the same idea as before and write

y.firstChild.data = 'whatever';

However, as you've probably guessed from this post, that doesn't work. I also tried to append a child, rather than adding onto the first child as well as just writing y.data. Any ideas are greatly appreciated!

Member Avatar for Chokladkakan

Ah, you're absolutely right! That worked gracefully! Pardon me for missing that note. Thanks once again, fxm!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.