Basically, I'm trying to append a radio button value to a div on click. This works as it should, but I can't seem to clear the div when clicking another radio button.
There should only ever be 1 piece of appended data within the div.
I tried to clear the div with innerHTML before appending the value but doesn't seem to work
$('input[type="radio"]').one('click', function () { var getVal = $(this).val(); if ($('.selections').text().length < 0) { console.log('less than'); } else if ($('.selections').text().length > 0){ console.log('more than'); $('.selections').innerHTML = ""; $('.selections').append(getVal); } console.log(getVal); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label> <span class="radio-c"> <input type="radio" name="q1" value="Between £381K and £450K" id="between381"> Between £381K and £450K </span> </label> <label> <span class="radio-c"> <input type="radio" name="q1" value="Over £450K" id="over450"> Over £450K </span> </label> </form> <div class="selections"> </div>
innerHTML
is used when using vanilla JS. You should use text()
on jQuery referenced object. You also do not need to append here.
I also believe you have mistakenly used .one()
, which should be .on()
.
$('input[type="radio"]').on('click', function () { var getVal = $(this).val(); if ($('.selections').text().length < 0) { //console.log('less than'); } else if ($('.selections').text().length > 0){ //console.log('more than'); $('.selections').text(getVal); } //console.log(getVal); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label> <span class="radio-c"> <input type="radio" name="q1" value="Between £381K and £450K" id="between381"> Between £381K and £450K </span> </label> <label> <span class="radio-c"> <input type="radio" name="q1" value="Over £450K" id="over450"> Over £450K </span> </label> </form> <div class="selections"> </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.