0

Problem: I have a list with Items and I want to add the sum of all list-items to the h1-element.

I am trying to do that by adding additional html via javascript. You can see that in those 10 lines of js-code.

The first console.log(newHeading.textContent) returns "undefined". Why is that? Is that because I am not creating a separate em-Element as parent-node to the text (which is only the respective sum of list-items)?

The 2nd console.log returns the title + html + item-sum, even though I used text.Content. Why is that?

This is what it looks like so far: Codepen

/* add item-counter to header
 *
 */ 
var heading = document.getElementById("title");  // fetching the h1-Element in a Variable
var headingText = heading.firstChild.nodeValue;  // saving the text alone separately, 
                                                 // which is "Shopping-List"
var totalItems = listItems.length;               // saving the number of Items

// creating a new Title, by adding an em-Element to the previously saved "headingText"
var newHeading = headingText + '<em id="subTitle">' + totalItems + '</em>';
console.log(newHeading.textContent);  // this retuns "undefined"

heading.textContent = newHeading;
console.log(heading.textContent);     // this returns the Title-Text + Item-Sum + parent-em- 
                                      // node. I thought .textContent ***hides the html***?
Josh
  • 125
  • 7

1 Answers1

0

To achieve expected result, use below option as newHeading is a string

newHeading.substring(
    newHeading.indexOf(">") + 1, 
    newHeading.indexOf("</")
)

codepen for reference - https://codepen.io/nagasai/pen/VGoJmE

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
  • Could you explain that code? I know the methods you used, but I don't understand why it works. Plus this code replaces the entire title, but I want that sum to concatenate the title so that is says: "Shopping-List *sum*". And also... for some reason now I get a syntaxerror in the line: `newHeading.substring( // unexpected token . ` I only repasted your code into my code and now it doesn't work anymore. – Josh Sep 26 '18 at 19:45
  • above code is just capturing text between closing '>' of em and opening and closing em tag '' and it seemd to working due to the font which you are using - Indie Flower where number looks like italic – Naga Sai A Sep 26 '18 at 20:08
  • one option is to try - https://codepen.io/nagasai/pen/ZqzzyE where i have remove the font Indie Flower cursive just to differentiate – Naga Sai A Sep 26 '18 at 20:12
  • var newHeading = '' + totalItems + ''; heading.innerHTML = headingText + ' ' + newHeading; – Naga Sai A Sep 26 '18 at 20:12
  • instead of making newHeading as string, make it tag and use innerHTML to emphasize text and then add headingText – Naga Sai A Sep 26 '18 at 20:14
  • Thank you! This works perfectly now. The book I use to learn about JS says that `.innerHTML` should be avoided when possible, because it supposedly doesn't hide the surrounding html-code. But this example shows that in fact only the Text-node is shown... without the surrounding em-parent-node, which I thought innerHTML cannot do. What I am getting wrong here? – Josh Sep 27 '18 at 11:52
  • @Josh, .innerHTML should be avoided in case of updating element which is having chidl elements, as innerHMTL will clear them from selected DOM element and replace them – Naga Sai A Sep 27 '18 at 19:21
  • in your case, you are just adding one element and there is only element surrounding that, will work for you – Naga Sai A Sep 27 '18 at 19:22
  • check this link for more details - https://stackoverflow.com/questions/18502238/why-is-it-suggested-to-avoid-innerhtml – Naga Sai A Sep 27 '18 at 19:23