vendredi 23 juin 2017

Why is my div not showing (JQuery)?

I have a page with checkboxes that have string values (A, B, C). I am trying to create an app that builds a string on the screen based on the values of the selected checkboxes, separated by the '+', for example 'A+B+C' or 'A+B', etc.

My code is below:

app.html:

<html>

<head>
    <title>My page</title>
     <link rel="stylesheet" href="main.css" />

    <script src="http://ift.tt/2nYZfvi" type="text/javascript"></script>
    <script src="my_jq.js" type="text/javascript"></script>



</head>
<body>
<p><div id="displayConcatenatedString"></div>


<p>
 <p>
<p>
 <table style="width:100%">
  <tr>
 <th>1</th>
<th>2</th>
<th>3</th> 
 </tr>
<tr>
<td><label><input type="checkbox" name="selected" value="A" class="offers" />A</label></td>
 <td><label><input type="checkbox" name="selected" value="B" class="offers" />B</label></td> 
 <td><label><input type="checkbox" name="selected" value="C" class="offers" />C</label></td>
 </tr>
</table>
</body>
</html>

my_jq.js:

var arr = $(".offers:checked").map(function(){
return $(this).val();
  }).get();
$('#displayConcatenatedString').html(arr.join('+'));

Yet, my div is not showing when the checkboxes are selected.

What am I doing wrong?




Aucun commentaire:

Enregistrer un commentaire