0

I cant figure out how i can get ", i need this in a text when using DOM.innerHTML.

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp('kokain')' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>"

I need to call a function onclick='endre("kjøp_narkotika") I cant use onclick='endre('kjøp_narkotika') becuse then the function wont call.

Fredrik Elias Freding
  • 23
  • 3

2 Answers2

1

    document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("kokain")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("hasj")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("amfetamin")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("benzo")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("molly")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`
    function kjøp(param){console.log(param)}
<div id="info"></div>

Try this, I hope it helps.

Backticks are supported by ES6.

document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("kokain")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("hasj")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("amfetamin")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("benzo")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("molly")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`

Method 2 : Concatenate strings

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("+'"kokain"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("+'"hasj"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("+'"amfetamin"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("+'"benzo"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("+'"molly"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`
Adnane Saber
  • 35
  • 1
  • 10
0

You can use backticks (`) instead of (")

document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick="kjøp('kokain')" class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`

In the above example I have changed the Single quotes to double quotes for button click.

onclick="kjøp('kokain')"

You can see a sample here : https://jsfiddle.net/jubish/w2ospk15/16/

Click on the button Kokain to see the results.

Method 2

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp( \"kokain\")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>"

Here I have used backslash to escape the double quotes Example :

 onclick='kjøp( \"kokain\")'

working code - https://jsfiddle.net/jubish/ez3hr7g1/8/

Jubish Kammily
  • 109
  • 10