简体   繁体   中英

Im having trouble writing a variable to a modal window

So I'm totally not into javascript, sadly I need to use it for a small project. I'm making a checklist but I can't get a variable to write to a modal box. I left out the rest of the checklist because that would be a lot of unnecessary HTML.

What I want to achieve :

The if statement with the count is going to calculate how many points you got correct on the checklist. Then he will write this calculation to the modal box/window. But I can't manage to get the variable trough. Is it a scope problem perhaps?

My code

<a class="subbtn" href="#popup1" onclick="checkboxes()">Verstuur</a>
<script>
$(document).ready(function () {
    $(".checklist").contents().find(":checkbox").bind('change', function () {
        val = this.checked; //<---
        $(this).parent().toggleClass('checked');
    });
    $(".checklist").contents().find(":checkbox").bind('focus', function () {
        val = this.focused; //<---
        $('.focus').removeClass('focus');
        $(this).parent().addClass('focus');
    });
});
</script>
<script>
function checkboxes(variable) {
    var inputElems = document.getElementsByTagName("input")
        , count = 0;
    for (var i = 0; i < inputElems.length; i++) {
        if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
            count++;
        }
    }
    if (count == '0') {
        document.getElementsByClassName('content').innerHTML = variable;
    }
    else if (count == '5') {
        alert('Not good')
    }
    else if (count < 5) {
        alert('decent')
    }
    else if (count > '5') {
        alert('Better')
    }
}
</script>
</section>
</div>
<div id="popup1" class="overlay">
<div class="popup">
    <h2>Je scoort</h2> <a class="close" href="#">&times;</a>
    <div class="content">
        <script>variable</script>
    </div>
</div>

The problem seems to be the fact that you get a list. You can use that to get a single element with the classname.

   function checkboxes(variable) {
        var variable = "mooi";
        var inputElems = document.getElementsByTagName("input")
            , count = 0;
        for (var i = 0; i < inputElems.length; i++) {
            if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
                count++;
            }
        }
        if (count == '0') {
            document.querySelector('.content').innerHTML = variable;
        }
        else if (count == '5') {
            alert('bagger')
        }
        else if (count < 5) {
            alert('Waardeloos')
        }
        else if (count > '5') {
            alert('Beter')
        }
    }

This worked for me.

document.getElementsByClassName('content')[0].innerHTML = variable;

Also works.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM