David Swann David Swann - 3 months ago 8
HTML Question

When adding a class onclick, is it possible to assess all input values and then readjust the classes based on that?

Good afternoon, apologies if this more obvious than it appears to myself,

I am having a difficult time adding classes to some input zones, is there a way to add another class to an input and then from this action continue to do more, in one streamlined section of code.

This is a diluted version of the issue I am having as I can't seem to get it to work, I still very am much a novice with JavaScript and any advice would be greatly appreciated.

<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function checkSubmission(){
var inputVal = document.getelementbyclassName("compulsory").value;
if (inputVal == "") {
$('this').addClass('redborder');
window.location = "";
};
else if (inputVal != "" && document.getelementbyclassName('redborder')) {
$('this').removeClass('redborder');
window.location.href('');
};
else {
window.location.href('');
};
};
function checkFilled(){
var inputFill = document.getelementbyclassName('redborder').value;
if (inputFill != "") {
document.getelementbyclassName('redborder').style.border-color = "green";
};
};
</script>
<style type="text/css">
.redborder{
border-color: red;
}
</style>
</head>
<body>
<button onclick="checkSubmission()">Change</button>
<input class="compulsory">
</body>
</html>


Thank you very much in advanced if you are able to assist.

Answer

Here is a "cleaned up" version I doubt it will work but if you compare it to what you have you can see all the changes mentioned above.

function checkSubmission() {
    var inputVal = document.getElementsByClassName("compulsory").value;
    if (inputVal == "") {
        $("this").addClass("redborder");
            window.location = "";
    } else if (inputVal !== "" && document.getElementsByClassName("redborder")) {
        $("this").removeClass("redborder");
            window.location.href("");
    } else {
        window.location.href("");
    }
}

function checkFilled() {
    var inputFill = document.getElementsByClassName("redborder").value;
    if (inputFill !== "") {
        document.getElementsByClassName("redborder").style.border = "thin solid green";
    }
}