0

I have generated my Header from JavaScript Data.

To generate I'm iterating through an Object.

Generating the HTML looks like:

for (const topic in templateTopic) {
  if (Object.prototype.hasOwnProperty.call(templateTopic, topic)) {
    const element = templateTopic[topic]
    // console.log(element);
    template += '<div class="col col-topic-element" id="' + element + '" onClick="filterTopic(' + element + ')">'
    template += '<p>' + element + '</p>'
    template += '</div>'
  }
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);

When I inspect the Element it contain following strange data (Chrome Inspector Output):

<div id="topics" class="row">
  <div class="col col-topic-element" id="film" onclick="filterTopic(film)">
    <p>film</p>
  </div>
  <div class="col col-topic-element" id="photography" onclick="filterTopic(photography)">
    <p>photography</p>
  </div>
  <div class="col col-topic-element" id="visual design" onclick="filterTopic(visual design)" data-kwdiaostructure="&quot;0&quot;:&quot;input&quot;,&quot;1&quot;:&quot;submit@visual design@@col col-topic-element@@@@KwDiaoTagDIV&quot;,&quot;2&quot;:&quot;visual design&quot;"
    data-kwdiaohashid="input@submit@visual design@@col col-topic-element@@@@KwDiaoTagDIV@visual design">
    <p>visual design</p>
  </div>
</div>

How can I get rid of the data, because when I click on the last Element ("visual design"), the console throws an error and I can't add further code.

Console output after clicking the 3 generated Items:

Console Output

I integrated Bootstrap 4 CDN and fontawesome.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
joshii_h
  • 1,583
  • 3
  • 14
  • 24
  • Share the console output so we have a better idea of what's going on. Also, let us know that you're not loading any other scripts (frameworks or libraries) in your project. – Juan Marco Apr 14 '20 at 14:24
  • I am sure it is a tagging software – mplungjan Apr 14 '20 at 14:28
  • @JuanMarco I've updated the question with the output and Framework – joshii_h Apr 14 '20 at 14:30
  • @mplungjan I haven't added any Software, but could it be from and dependency of Bootstrap? – joshii_h Apr 14 '20 at 14:33
  • I am sorry, I have no idea – mplungjan Apr 14 '20 at 14:35
  • If you added Bootstrap, make sure you're loading jQuery first, then the Bootstrap JS file. Also, check to see what line is that SyntaxError being reported at. – Juan Marco Apr 14 '20 at 14:36
  • @JuanMarco I've did it properly according https://getbootstrap.com/docs/4.4/getting-started/introduction/ and on the line is my javascript: – joshii_h Apr 14 '20 at 14:42
  • Ok, but if you're still getting SyntaxErrors there's obviously something wrong somewhere. To help you further, you can post the entire code here, or better yet in a separate sandbox (JSFiddle, Codesandbox, etc) – Juan Marco Apr 14 '20 at 14:47
  • 1
    `film`, `photography` and `visual design` are supposed to be strings, but you're adding them as variable names, and the space between `visual` and `design` causes the syntax error. Wrap the arguments into quotes (use escaped single quotes), then the code works. – Teemu Apr 14 '20 at 14:52
  • 1
    @Teemu Thank you, this solved the error, and the strange Data! – joshii_h Apr 14 '20 at 15:04

0 Answers0