Template literal issues

1

I don’t understand why the template literal won’t accept multiple words.

I wanted the image class to be the multiple word but only the first word appears as the class

However, console.log shows that klass is correct, why isn’t the whole string passed to the class, and only the first word?

code

function mouseover(d) {
  toolTip.transition()
    .style('opacity', .9);
   toolTip
    .html( () => {
      let klass = `flag flag-${d.code}`;
     
      console.log(klass); // flag flag-kn
      return (
        `<h1>${d.country}</h1>
       <img class=${klass} />` // <img class="flag" flag-kn>
     );
   })
}
2

I noticed that you changed your code a bit since this post, so I pasted your snippet here back in. Seems to work fine as I’m showing that klass is assigned the string that I expect of it.

It’s worth noting that you’re not going to see that markup anywhere as it’s not being returned anywhere that will render it. Also, you don’t get the country’s flag with flag-${d.code}, just ${d.code}.

3

Yes sorry for changing the code. I changed the event listener to click to make it easier to inspect the element. I guess I’m still confused of why entire string isn’t passed to class.

The console log ouput: flag flag-kn

and the image element: <img class="flag" flag-kn=""> when i expected the whole string to be passed to the class.

4

It seems like without the double quotes, the second string is being interpreted as an attribute. Both strings are most definitely in there, though. Try changing the definition of klass to this

let klass = `\"flag ${d.code}\"`