We Keep Coding

Uncaught SyntaxError: missing : after property id

I wanted to do a quiz. I thought I could do a var and whenever the right answer is clicked it gets to 1 and when you then press the button the correct answer is displayed. The problem is that no matter what I do it doesn't work.
var antwort = {
antwort = 0,
test: function() {
if (antwort === 0) {
document.getElementById("results").innerHTML = "That's right!";
} else {
document.getElementById("results").innerHTML = "That's wrong!";
}
},
antwort: function() {
antwort = 1
},
};
<input type="radio" name="q1" class="q">a<br>
<input type="radio" name="q1" class="q">b<br>
<input type="radio" name="q1" class="q" onclick="antwort()">c<br>
<input type="radio" name="q1" class="q">d<br>
<button id="submit" onclick="test()">Show Results</button>
<div id="results"></div>

You need
to selecet a different name for flag and function,
to use functions from the object,
to take better a boolean value as flag (which makes the comparison easier) and
to use this for addressing properties from the same object.
Inside the function, you could take a conditional (ternary) operator ?: for assigning the right message.
var antwort = {
antwort: false,
test: function () {
document.getElementById("results").innerHTML = this.antwort
? "That's right!"
: "That's wrong!";
},
richtigeAntwort: function () {
this.antwort = true;
}
};
<input type="radio" name="q1" class="q">a<br>
<input type="radio" name="q1" class="q">b<br>
<input type="radio" name="q1" class="q" onclick="antwort.richtigeAntwort()">c<br>
<input type="radio" name="q1" class="q">d<br>
<button id="submit" onclick="antwort.test()">Show Results</button>
<div id="results"></div>

Use === or == for comparison. I mean if (antwort === 0) or if (antwort == 0). Thank you.

Javascript - Why I am getting this error when I am using ng-if in AngularJS?

I am actually trying to show/hide a div based on user-type , suppose usertype1 will be able to see the div but usertype2 will not be able to view the div.
HTML CODE
<div class="rate animated rubberBand" ng-if="myCheck">
<input type="radio" id="starRating5" name="rate" value="5" disabled>
<label for="star5" title="text"></label>
<input type="radio" id="starRating4" name="rate" value="4" disabled>
<label for="star4" title="text"></label>
<input type="radio" id="starRating3" name="rate" value="3" disabled>
<label for="star3" title="text"></label>
<input type="radio" id="starRating2" name="rate" value="2" disabled>
<label for="star2" title="text"></label>
<input type="radio" id="starRating1" name="rate" value="1" disabled>
<label for="star1" title="text"></label>
</div>
JS CODE
if (userType === 'userType2')
{
$scope.myCheck = false;
}
else
{
$scope.myCheck = true;
}
JS CODE BLOCK which is giving me the error
if($scope.Item.starRating === 'NULL'){
$scope.Item.starRating = 0;
}
else if($scope.Item.starRating === '1'){
document.getElementById("starRating1").checked = true;
}
else if($scope.Item.starRating === '2'){
document.getElementById("starRating2").checked = true;
}
else if($scope.Item.starRating === '3'){
document.getElementById("starRating3").checked = true;
}
else if($scope.Item.starRating === '4'){
document.getElementById("starRating4").checked = true;
}
else{
document.getElementById("starRating5").checked = true;
}
THE ERROR
Cannot set property 'checked' of null
I just want to show the div for userType1 and hide for userType2. I am not using JQuery.
UPDATE
the only problem I am getting with Pengyy's solution - the problem is fixed with userType1 in which the div show but now I am facing problem with userType2 in which the div should not display. Here in userType2 inspite of myCheck being false and irrespective of whether ng-show or both ng-cloak and ng-show is used the div is displayed for few moments and then disappearing . It should not display at all for userType2

With ng-if, the elements will be removed from DOM when the expression is false.
documentation here.
This will cause document.getElementById() to get nothing back.
Consider your situation, you should try ng-show instead.
<div class="rate animated rubberBand" ng-cloak ng-show="mycheck">
...
</div>

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$log) {
$scope.userType = 'userType1';
$scope.mycheck = true;
$scope.change=function(){
if ($scope.userType == 'userType2')
{
$scope.mycheck = false;
}
else
{
$scope.mycheck = true;
}
//$log.info($scope.userType);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl" >
<select ng-model="userType" ng-change="change()">
<option value="userType1">userType1</option>
<option value="userType2">userType2</option>
</select>
<div class="rate animated rubberBand" ng-if="mycheck">
<input type="radio" id="starRating5" name="rate" value="5" disabled>
<label for="star5" title="text"></label>
<input type="radio" id="starRating4" name="rate" value="4" disabled>
<label for="star4" title="text"></label>
<input type="radio" id="starRating3" name="rate" value="3" disabled>
<label for="star3" title="text"></label>
<input type="radio" id="starRating2" name="rate" value="2" disabled>
<label for="star2" title="text"></label>
<input type="radio" id="starRating1" name="rate" value="1" disabled>
<label for="star1" title="text"></label>
</div>
</div>
</div>

You need to way to track the userType changes, this is only for handling userType when controller load
$scope.userType = 'userType1';
if ($scope.userType=== 'userType2')
{
$scope.myCheck = false;
}
else
{
$scope.myCheck = true;
}
So you need to add $watch to watch the userType changes
$scope.$watchCollection("userType ", function(newVal, oldVal){
$scope.userType = newVal;
if ($scope.userType=== 'userType2')
{
$scope.myCheck = false;
}
else
{
$scope.myCheck = true;
}
}

Allow only one checked checkbox, Angular best practice.

Im using angular.
I have Three checkboxes in a Group and i want to make sure only one of them can be checked. So if one is checked the other two has to bee unchacked. I can Think of doing this several ways with native JS or jQuery but i want to know if there is a typical Angular way of doing it.
Here is Plunker with a set up of the checkboxes and angular controll.
http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview
<body ng-controller="MainCtrl">
<div>
{{vm.Output}}
<br>
<br>
<br>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
<input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>
<br>
<br>
<br> {{vm.Output}}
</body>

Since you can't use radio buttons, I've made this plnkr when you check one the others are deselected:
http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview
<label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" > A1 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" > A2 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" > A3 </label>
Hope it helps =)
Edit: You can probably change the state of the other checkboxes in the controller for best practice, made in the html just to demonstrate more quickly..

Another way to do it would be: http://plnkr.co/edit/kH12pYkXfY6t6enrlSns
<br><br><br>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" > A1 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" > A2 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" > A3 </label>
<br><br><br>
The controller would look like this:
$scope.vm = {
groupA: [false, true, false],
count : 0,
changeGroupA : function (index)
{
for (i = 0, len = this.groupA.length; i < len; ++i) {
this.groupA[i] = ((1 << index) & (1 << i)) > 0;
}
this.Output = '(' + this.count + ')' + this.Output;
this.count ++;
},
Output : 'Here we go'
}

You might want to do it the hard way out. http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JA and it should work
changeGroupA : function (x)
{
if (x === 'A1'){
$scope.vm.a1 = true;
$scope.vm.a2 = false;
$scope.vm.a3 = false;
}
else if (x === 'A2') {
$scope.vm.a2 = true;
$scope.vm.a1 = false;
$scope.vm.a3 = false;
}
else if (x === 'A3') {
$scope.vm.a3 = true;
$scope.vm.a1 = false;
$scope.vm.a2 = false;
}
this.Output = '(' + this.count + ')' + this.Output;
this.count ++;
},

This works perfectly fine for angular 6 or 8
HTML:
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="check1id"
[(ngModel)]="check1" (change)="onlyOneValue($event)"/>
<label for="check1id" class="custom-control-label">Checkbox 1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="check2id"
[(ngModel)]="check2" (change)="onlyOneValue($event)" />
<label for="check2id" class="custom-control-label"> Checkbox 2 </label>
</div>
.ts code:
check1=false;
check2=false;
onlyOneValue(e)
{
if (e.target.id == "Check1id") {
this.Check1= true;
this.Check2 = false;
}
else if (e.target.id == "Check1id") {
this.Check1= true;
this.Check2 = false;
}
}

Why don't you just use a radio button?
<label>
<input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label>
<label>
<input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label>
<label>
<input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

How to make an active radio button unclickable

There is a radio input form with two options in a Javascript / html base page. How i can make un-clickable the option which is active or after activation?
<div class="unit_1">
<label><input checked name=unit onclick=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
<label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label>
</div>

Please try this .Replace with your radio buttons
$(document).ready(function() {
$(".check").click(function() {
$(".check").attr("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" class="check" name="gender">
<input type="radio" class="check" name="gender">

If you want to use a complete javascript-free option you can go with CSS3 only:
input[type=radio]:checked {
position: relative;
pointer-events: none;
}
input[type=radio]:checked:before {
content:" ";
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
z-index:10;
}
This will prevent the clicks on the active radio.
JSFiddle: https://jsfiddle.net/he31ob0t/

Try this :
function Screen_Units(){
//your rest of the code
document.getElementById("first").checked = true;
}
<div class="unit_1"><label><input id="first" checked readonly name=unit onclick="Screen_Units();" type=radio value=SI>SI</label></div>
<div class="unit_2"><label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label></div>

How about hiding the other?
function Screen_Units(but) {
var buts = document.getElementsByName(but.name);
var val = but.value;
var div = (val == buts[0].value) ? upTo(buts[1],"div") : upTo(buts[0],"div");
div.style.display="none";
}
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
return null;
}
<div class="unit_1">
<label><input checked name="unit" onclick="Screen_Units(this);" type=radio value="SI">SI</label>
</div>
<div class="unit_2">
<label><input name="unit" onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
</div>

as #boldewyn mentioned in comments "using onchange instead of onclick" solved my problem.
<div class="unit_1">
<label><input checked name=unit onchange=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
<label><input name=unit onchange=Screen_Units() type=radio value=Engl>Imperia</label>
</div>
thanks all

Try it :
With Pure javascript :
<html>
<head>
</head>
<body>
<div class="unit_1">
<label><input checked name="unit" onclick="Screen_Units(this)" type="radio" value="SI">SI</label>
</div>
<div class="unit_2">
<label><input name="unit" onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var ele = document.getElementsByName("unit");
function Screen_Units(t){
for(var i=0; i<ele.length; i++) {
if(ele[i]!=t){
var x = ele[i];
while(x.parentNode.tagName != "DIV")
x = x.parentNode;
x.style.display = "none";
}
}
}
</script>
</body>
</html>

onclick="this.checked=false;"
will make it unclickable.

Jquery - Iterate through all checked radio buttons

I have a form which is similar like the one below:
<form id="myForm">
Question 1:<br>
<input type="radio" name="question1" value="Yes"> Yes
<input type="radio" name="question1" value="No"> No
<br>
Question 2:<br>
<input type="radio" name="question2" value="Yes"> Yes
<input type="radio" name="question2" value="No"> No
<br>
Question 3:<br>
<input type="radio" name="question3" value="Yes"> Yes
<input type="radio" name="question3" value="No"> No
<br>
<input type="submit" value="Submit" name="submit">
</form>
I want to get all the selected radio button values from all the questions using jQuery and if all values is equal to "yes", it will alert success else it will alert fail.
This is the jQuery I wrote:
$(document).ready(function(){
$("#myForm input[type=radio]:checked").each(function() {
var value = $(this).val();
});
});

You can check if you ever get no with radio checked then result is fail else success.
Live Demo
result = "success";
$("#myForm input[type=radio]:checked").each(function() {
if(this.value == "No" && this.checked == true)
{
result = "fail";
return false;
}
});
alert(result);

$(document).ready(function(){
var val=1;
$("#myForm input[type=radio]:checked").each(function() {
if($(this).val()=="No")
{
val=2;
}
});
if(val==1)
{
alert("Success !!");
}
else{
alert("Fail ");
}
});

$(document).ready(function(){
var no_found=false;
$("#myForm").submit(function(){
$(this).find("input[type=radio]:checked").each(function() {
var value = $(this).val();
if(value == "No")
no_found=true;
});
if(no_found==false){
alert("Success");
}
else{
alert("Fail");
}
});
});

Use this code:
$(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault();
var total = 0;
$('#myForm input[type="radio"]:checked').each(function() {
if ($(this).val() == 'Yes')
total++;
});
if (total == 3)
alert("Success");
else
alert("Fail");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
Question 1:
<br>
<input type="radio" name="question1" value="Yes" checked>Yes
<input type="radio" name="question1" value="No">No
<br>Question 2:
<br>
<input type="radio" name="question2" value="Yes">Yes
<input type="radio" name="question2" value="No" checked>No
<br>Question 3:
<br>
<input type="radio" name="question3" value="Yes">Yes
<input type="radio" name="question3" value="No" checked>No
<br>
<input type="submit" value="Submit" name="submit">
</form>

Try this code
$("#myForm").submit(function(){
var check = "Yes";
$(this).find("input[type=radio]:checked").each(function() {
var value = $(this).val();
if(value == "No")
check = "No";
});
alert(check)
});

You may try this as well:
http://codepen.io/anon/pen/JGeLMx
$('#myForm input[type="submit"]').on('click', function(e) {
e.preventDefault();
var result = true;
$('input[type="radio"]').each( function() {
var radio = $(this)[0];
if ( radio.value === 'Yes' && radio.checked === false )
result = false;
});
if ( result ) {
alert( 'Success!' );
} else {
alert( 'Fail!' );
}
});
Iterated all the radio buttons and if a single check on 'No' or none is selected at all it will fail, otherwise, it would mean all 'Yes' are checked - success.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type="radio"]').change(function () {
var iCountTotal;
var iCountCkedYes;
iCountTotal = $('input[type="radio"]').length/2;
iCountCkedYes = $('input[type="radio"][value="Yes"]:checked').length;
if (iCountTotal != iCountCkedYes) {
alert('fail')
}
else {
alert('success')
}
});
});
</script>
<body>
<form id="myForm">
Question 1:<br>
<input type="radio" name="question1" value="Yes" checked="checked"> Yes
<input type="radio" name="question1" value="No"> No
<br>
Question 2:<br>
<input type="radio" name="question2" value="Yes"> Yes
<input type="radio" name="question2" value="No" checked="checked"> No
<br>
Question 3:<br>
<input type="radio" name="question3" value="Yes"> Yes
<input type="radio" name="question3" value="No" checked="checked"> No
<br>
<input type="submit" value="Submit" name="submit">
</form>
</html>