0

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: n/a

2
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by Chokladkakan
0

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.

0

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!

1

Thanks a lot for the fast and constructive response

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

0

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!

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.