how to use javascript in HTML given an error Uncaught SyntaxError: Unexpected token for
var i;
var html = '<div class="add_more_ticket_div">\
<div class="form-group">\
<label class="col-sm-2 control-label">Ticket name *</label>\
<div class="col-sm-6">\
<input type="text" name="ticket_name[]" value="" class="form-control allowOnlyLetter">\
<p>Early bird, Standard, V.I.P</p>\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-2 control-label">Description</label>\
<div class="col-sm-6">\
<input type="text" name="ticket_desc[]" value="" class="form-control allowOnlyLetter">\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-2 control-label">Ticket price *</label>\
<div class="col-sm-3">\
<input type="text" name="ticket_price[]" value="0.00" class="form-control allowNumDot">\
<p>Set zero if ticket is free</p>\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-2 control-label">Ticket quantity *</label>\
<div class="col-sm-3">\
<input type="text" name="ticket_quantity[]" value="" class="form-control allowOnlyNumber">\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-2 control-label">Max no. of ticket that each user can buy</label>\
<div class="col-sm-3">\
<select name="ticket_can_buy[]" class="form-control">\
'+for (i = 0; i <= 30; i++) {+'<option value="'+i+'">'+i+'</option>'+}+'</select>\
</div>\
<div class="col-sm-3">\
<a href="javascript:void(0)" class="btn bg-orange btn-flat remove-ticket-section">- Remove</a>\
</div>\
</div>\
</div>';
$('.add_more_ticket_div:last').after(html);
how to use javascript in HTML given an error Uncaught SyntaxError: Unexpected token for
You should not mix your JavaScript and your HTML. Instead, you can populate your select from your JavaScript using querySelector
to get a reference to your select to then set its innerHTML
property.
You can generate your list of options my first generating a range from 0 to 30:
Array.from({ length: 30 }, (_,i) => i) // gives [0, 1, 2, 3... 29]
Then you can map over it to generate an array of options:
arr.map(i => `<option value="${i}">${i}</option>`)
And then you create a string by joining the array elements with join('')
.
const selectHTML = Array.from({ length: 30 }, (_,i) => i) .map(i => `<option value="${i}">${i}</option>`).join(''); document.querySelector('#mySelect').innerHTML = selectHTML;
<div class="add_more_ticket_div"> <div class="form-group"> <label class="col-sm-2 control-label">Ticket name *</label> <div class="col-sm-6"> <input type="text" name="ticket_name[]" value="" class="form-control allowOnlyLetter"> <p>Early bird, Standard, VIP</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Description</label> <div class="col-sm-6"> <input type="text" name="ticket_desc[]" value="" class="form-control allowOnlyLetter"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Ticket price *</label> <div class="col-sm-3"> <input type="text" name="ticket_price[]" value="0.00" class="form-control allowNumDot"> <p>Set zero if ticket is free</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Ticket quantity *</label> <div class="col-sm-3">\\ <input type="text" name="ticket_quantity[]" value="" class="form-control allowOnlyNumber"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Max no. of ticket that each user can buy</label> <div class="col-sm-3"> <select id="mySelect" name="ticket_can_buy[]" class="form-control"></select> </div> <div class="col-sm-3"> <a href="javascript:void(0)" class="btn bg-orange btn-flat remove-ticket-section">- Remove</a> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.