How to use var javascript in innerHTML?

Question

How to use a javascript variable when setting the innerHTML of an element? To see my problem first click CLICK 1. This will show delete and then click delete. Why does the alert not show 111-aaaa,1? How can I do that?

https://jsfiddle.net/brf75wvp/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input id="test_id" value="1"/>
<div onclick="test_fn1()">CLICK 1</div>
<div id="demo"></div>

<script>
    function test_fn1() {
        var test_id_val = document.getElementById("test_id").value;
        document.getElementById("demo").innerHTML = "<span onclick= delete_fn('111-aaaa, test_id_val')>delete</span>";
    };
</script>

<script>
    function delete_fn(no_delete) {
        alert(no_delete);
    };
</script>

Please tag your questions appropriately. This had nothing to do with jquery, css, html nor ajax — Rory McCrossan
– Rory McCrossan, Commented Jan 27, 2016 at 11:45

Ibrahim Khan · Accepted Answer · 2016-01-27 12:02:10Z

2

You should add the variable with string like following.

function test_fn1() {
    var test_id_val = document.getElementById("test_id").value;
    document.getElementById("demo").innerHTML = "<span onclick=delete_fn('111-aaaa,"+test_id_val+"')>delete</span>";
}

edited Jan 27, 2016 at 12:02

answered Jan 27, 2016 at 11:44

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2016-01-27 11:44:29Z

1

You need to concatenate the variable to string:

document.getElementById("demo").innerHTML = "<span onclick=delete_fn('111-aaaa," + test_id_val + "')>delete</span>";

Updated fiddle

answered Jan 27, 2016 at 11:44

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Comments

rishikesh tadaka · Accepted Answer · 2016-01-27 11:47:29Z

1

There is syntax error. Correct one is:

document.getElementById("demo").innerHTML = "<span onclick=delete_fn('111-aaaa," + test_id_val + "')>delete</span>";

answered Jan 27, 2016 at 11:47

rishikesh tadaka

4831 gold badge6 silver badges18 bronze badges

Comments

Sujithrao · Accepted Answer · 2016-01-27 11:55:30Z

0

Your code having some error try using bellow this will work

<script>
function test_fn1() {
var test_id_val = document.getElementById("test_id").value;
document.getElementById("demo").innerHTML = '<span onclick=delete_fn("111-aaaa,'+test_id_val+'")>delete</span>';
};
</script>

answered Jan 27, 2016 at 11:55

Sujithrao

7853 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to use var javascript in innerHTML?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related