IT Quiz - do not show anwers unless checkbox is selected - javascript

I am trying to make sure that at least two checkboxes are selected. If no checkboxes are selected, then an error message appears. This is what I have tried so far:
function quiz4() {
var a4 = document.getElementsByName('q4');
for (i = 0; i < a4.length; i++) {
if(a4[i].checked == false) {
document.getElementById('oCorrectAnswer4').innerHTML = "Please select your answers.";
}
}
if (document.getElementById('q41').checked && document.getElementById('q43').checked) {
document.getElementById('oCorrectAnswer4').innerHTML = "Correct: The answer is " + "<u>A) Keyboard and C) Finger Print Scanner</ul>";
inputs = document.getElementsByName('q4');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'checkbox') {
inputs[i].disabled = true;
}//end of if
}//end of for
} else {
document.getElementById('oCorrectAnswer4').innerHTML = "Incorrect: The answer is " + "<u>A) Keyboard and C) Finger Print Scanner</ul>";
inputs = document.getElementsByName('q4');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'checkbox') {
inputs[i].disabled = true;
}//end of if
}//end of for
}
}//end of q4
I know this does not work, as the for loop is bypassed (I guess), but I had to start somewhere.
Any help will be appreciated.

Related

Change div bgcolor onkeypress

Trying to change the background color of all my divs using a onkeypress event. R = Red , B=White, V=Green. When press R it works but when i press V or B it gives me the alert.
I tried without return, with a switch(actualy im supposed to do this with a switch). Teacher cancelled class today so I wasnt able to check it out with him .And I Wont see him til next week. I tried things and other things for 2-3 hours and im totaly stuck Please help.. Thanks in advance
window.onkeypress = function colorchange(x)
{
if (x.keyCode == 114)
{ var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}return;
}
if (x.keycode == 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}return;
}
if (x.keycode == 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}return;
}
else
{
alert("this key doesnt do anything")
}
}
}
The variables are case-sensitive. You have keycode and it should be keyCode. Looks like you should also be using else if().
window.onkeypress = function colorchange(x) {
if (x.keyCode == 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "red";
}
return;
} else if (x.keyCode == 118) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "green";
}
return;
} else if (x.keyCode == 98) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "white";
}
return;
} else {
alert("this key doesnt do anything")
}
}
body {
background: #eee;
}
div {
width: 100px;
height: 100px;
background: #aaa;
}
<div></div>
You are comparing x.keycode instead of x.keyCode in the second and third if statements. You should also chain the conditions using else if.
window.onkeypress = function colorchange(x)
{
if (x.keyCode === 114) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "red";
}
return;
}
else if (x.keyCode === 118)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "green";
}
return;
}
else if (x.keyCode === 98)
{
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
divs[i].style.backgroundColor = "white";
}
return;
}
else
{
alert("this key doesnt do anything")
}
}
See working jsfiddle here.

javascript check a box with value

I am trying to check boxes in JS. I wan't to only check when the value is equal to 0, if not don't check it. my code :
document.onreadystatechange = function check(e)
{
if (document.readyState === 'complete')
{
var inputElements = document.getElementsByTagName("input");
for(var i=0; i < inputElements.length; ++i)
{
if(document.getElementsByTagName("input")[i].value == "1")
{
document.getElementById("date").checked = false;
}
}
}
}
But it doesn't work. Can you help me?
thanks
What you are doing is, if the checkboxes have value of 1, then you are checking it. Make this change in the code and it should work. Also, you need to check if you are doing this on a checkbox and not on a radio or text:
if(document.getElementsByTagName("input")[i].value == 0 &&
document.getElementsByTagName("input")[i].getAttribute("type") == "checkbox")
{
document.getElementById("date").checked = true;
}
var eles = document.querySelectorAll("input[type='checkbox']");
var len = eles.length,
i = 0,
flag = true;
for (; i < len; i++) {
if (eles[i].value === "1") {
flag = false;
return;
}
}
if (flag) document.getElementById('date').checked = true;
If the value ( 0 or 1 ) is of an <input type='text'>, then change document.querySelectorAll("input[type='checkbox']"); to document.querySelectorAll("input[type='text']");

uncheck Function doesnt work

it seem i solve this question myself~
in a simple and stupid way :
Checkall Box
var tab = document.getElementById("tbl");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (tab.checked == elems.checked)
{
elems[i].checked = true;
}
}
UncheckAll Box :
for (var i = 0; i < len; i++) {
if (tab.checked == elems.checked)
{
elems[i].checked = false;
}
}
it seem i solve this question myself ~~
Checkall Box
var tab = document.getElementById("tbl");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (tab.checked == elems.checked)
{
elems[i].checked = true;
}
}
}
UncheckAll Box :
for (var i = 0; i < len; i++) {
if (tab.checked == elems.checked)
{
elems[i].checked = false;
}
}
}

Checking all radio button are checked in native javascript

I have a gatherRadioBtn() function which posts form else displays error in page. This takes cue from checkRadioWrapper() to check if all radio buttons are checked.
However, the true condition does not materialize. Is there a mistake in my (r[i].type == "radio") && !(r[i].checked) expression.
Will upload on jsfiddle soon
Thanks.
function checkRadioWrapper()
{
for (var i=0; i < r.length; i++)
{
if ( (r[i].type == "radio") && !(r[i].checked) )
{
return false;
}
}
return true;
}
function gatherRadioBtn()
{
alert("in gather");
var r = document.getElementsByTagName("input");
var literal = [];
for (var i=0; i < r.length; i++)
{
if ( (r[i].type == "radio") && r[i].checked )
{
literal.push(r[i].name);
literal.push(r[i].value);
}
}
if (checkRadioWrapper())
{
document.getElementById("Errnodata").innerHTML = "" ;
var joinedArray = literal.join(", ");
window.opener.document.getElementById("myarray").value= joinedArray;
window.opener.getVolunteerDetails();
window.close();
}
else
{
document.getElementById("Errnodata").innerHTML = "Please select for every radio btns!" ;
}
}
You'll have to pass "r" as a parameter to your function:
function checkRadioWrapper( r )
{
for (var i=0; i < r.length; i++)
// etc
and then:
if (checkRadioWrapper( r ))
Now, that said, in a group of radio buttons sharing the same name, the browser will never allow all of them to be checked at the same time. Thus, this really doesn't make a lot of sense. If you've got radio buttons that don't share a name with other radio buttons, they should be checkboxes and not radio buttons.

Mark unmark javascript?

I've got a function to select all checkboxes in a table:
<script type="text/javascript">
function checkAll() {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = true;
}
}
}
But I can't get it to uncheck them all if they are checked. How could I do that?
<th width='2%'>Mark</th>";
Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?
This should do both of the things u want:
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if(elems[i].checked == true){
elems[i].checked = false;
}
else{
elems[i].checked = true;
}
}
}
if(obj.innerHTML == 'Mark') { obj.innerHTML = 'Unmark' }
else { obj.innerHTML = 'Mark' }
}
html:
<th width='2%'>Mark</th>";
1) why don't u use some js framework, like jQuery?
2) to remove checked, use elems[i].removeAttribute('checked') or set elems[i].checked = false;
3) to rename, you have to set it's innerHTML or innerText to Un-Mark
Add a little more logic to see if they're already checked. This will invert their current checked state.
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if (!elems[i].checked) {
elems[i].checked = true;
}
else elems[i].checked = false;
}
}
If you just want to uncheck all, simply use:
elems[i].checked = false;
This will check them all regardless of their current state, or uncheck them all, depending on the current text of "Mark" or "Unmark".
<script type="text/javascript">
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
var state = obj.innerHTML == 'Mark';
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = state;
}
}
obj.innerHTML = state ? 'Mark' : 'Unmark';
}
And then the HTML changes to:
<th width='2%'>Mark</th>";
To uncheck, try:
elems[i].checked = false;
i sugest you use jquery, everything is easier.
with jquery you just have to do something like this (+/-):
$(function(){
$('a.ClassName').click(function(){
var oTbl = $('#tableID');
$('input[type="checkbox"]', oTbl).attr("checked", "checked")
});
})

Categories

Resources