what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".
<html>
<body>
<p id="demo"></p>
<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >
<script>
function myFunction() {
var box = document.getElementById("chkbox");
if(checkbox.checked)
{
var checked.value = "yes";
var txt = checked.value;
document.getElementById("demo").innerHTML = txt;
}
else if(checkbox.unchecked)
{
var unchecked.value = "no";
var txt = unchecked.value;
document.getElementById("demo").innerHTML = txt;
}
}
</script>
</body>
function myFunction() {
var box = document.getElementById("chkbox");
if(box.checked)
{
document.getElementById("demo").innerHTML = 'yes'
}
else
{
document.getElementById("demo").innerHTML = 'no';
}
}
The problems in your code were:
You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.
There are multiple problems.
There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid
Try
<input type="button" value="button" onClick="myFunction()">
then
function myFunction() {
var box = document.getElementById("chkbox");
box.value = box.checked ? "yes" : 'no';
document.getElementById("demo").innerHTML = box.value;
}
Demo: Fiddle
Since jQuery tag is used include jQuery library in the page then
<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and
//dom ready handler
jQuery(function ($) {
//cache the elements for future use
var $chk = $('#chkbox'), // id-selector
$demo = $('#demo');
//click event handler
$('#button').click(function () {
//use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
$demo.text($chk.is(':checked') ? 'yes' : 'no')
})
})
Demo: Fiddle
try:
You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.
Here is code:
function myFunction() {
var box = document.getElementById("chkbox");
if (box.checked) {
document.getElementById("demo").innerHTML = "yes";
} else {
document.getElementById("demo").innerHTML = "no";
}
}
Here is working Demo
Check this one
function myFunction() {
if(document.getElementById('chkbox').checked) {
alert("checked");
} else {
alert("not checked")
}
}
try something like this,Shorthand
function myFunction(){
var box = document.getElementById("chkbox").checked;
document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}
Related
I have an input tag as follows as part of a form submission.
<input type=“checkbox” id=“allowcheatmode” name=allowCheatMode value=“NO” onchange=“allowCheatModes()”>
And allowCheatModes in a JS function
function allowCheatModes(){
var x = document.getElementById(“allowcheatmode”).checked
if (x) {
document.getElementById(“allowcheatmode”).value = “YES”
} else {
document.getElementById(“allowcheatmode”).value = “NO”
}
But this is not working when I am trying to print the allowcheatmode variable after form submission. What am I doing wrong here?
1) You have included an invalid character “ and ”. You should use " in both HTML and JS.
var x = document.getElementById(“allowcheatmode”).checked
2) There is no function named getElemenetById, instead use getElementById.
3) Add if-else code in the onChange function itself. So that it can trigger when checkbox value changes
NOTE I've added an extra label to just show the current state of the checkbox. You can skip that part.
function allowCheatModes() {
var x = document.getElementById("allowcheatmode").checked
if (x) {
document.querySelector("label").textContent = "YES"
document.getElementById("allowcheatmode").value = "YES"
} else {
document.querySelector("label").textContent = "NO"
document.getElementById("allowcheatmode").value = "NO"
}
}
<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">
<label for="allowcheatmode">NO</label>
Shouldn't it be this:
function allowCheatModes(){
var x = document.getElementById(“allowcheatmode”).checked
if (x) {
document.getElemenetById(“allowcheatmode”).value = “YES”
} else {
document.getElemenetById(“allowcheatmode”).value = “NO”
}
}
Try this
function allowCheatModes(){
var isChecked = document.getElementById("allowcheatmode").checked;
if (isChecked) {
document.getElementById("allowcheatmode").value = "YES";
} else {
document.getElementById("allowcheatmode").value = "NO";
}
}
<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">
The code above will be valid, because you had typo in getElemenetById (should be getElementById, not getElemeNETById). Anyway, you will see nothing in this case, because input with type="checkbox" have no view. You can improve your code adding some div element:
function allowCheatModes(){
var isChecked = document.getElementById("allowcheatmode").checked;
document.getElementById("allowcheatmode-view").innerHTML = isChecked ? "YES" : "NO";
}
<input type="checkbox" id="allowcheatmode" name="allowCheatMode" onchange="allowCheatModes()">
<div id="allowcheatmode-view">NO</div>
P.S.: "condition ? ifTrue : ifFalse" is ternary operator, the short form of "if"
You did two things wrong
First thing
You put if outside the function, please put if inside the function
function allowCheatModes() {
...
}
Replace with
function allowCheatModes() {
...
if(x){
...
}
}
Second thing
The function name you are using is wrong, you should use getElementById, not getElemenetById
document.getElemenetById
Replace with
document.getElementById
Below is my adjusted snippet, you can refer to it.
Have a good day :)
function allowCheatModes(){
var x = document.getElementById("allowcheatmode").checked;
if (x) {
document.getElementById("allowcheatmode").value = "YES"
} else {
document.getElementById("allowcheatmode").value = "NO"
}
console.log(document.getElementById("allowcheatmode").value);
}
<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">
I want to enable my button, when input is filled. I want to do it in pure Javascript.
My code example in HTML:
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
And Javascript:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
function myFunction() {
var nameInput = document.getElementById('name').value;
if (!nameInput === "") {
document.getElementById('send').disabled = "false";
}
}
});
I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working.
Please help.
An input element in HTML is enabled only when the disabled attribute is not present.
In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)
So you need to remove it altogether:
document.getElementById('send').removeAttribute('disabled')
The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.
Complete refactored code answer:
HTML
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name">
<br>
<button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>
JS
document.getElementById("name").addEventListener("keyup", function() {
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
document.getElementById('send').removeAttribute("disabled");
} else {
document.getElementById('send').setAttribute("disabled", null);
}
});
Try this one it will work for you
function myFunction() {
document.getElementById('send').disabled = true;
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
alert("Empty");
document.getElementById('send').disabled = false;
}
}
if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false
Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"
so just keep the same outside of DOMContentLoaded event
see working demo
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}
I am trying to make a button which will change text from kilometres to miles upon click. So far after reading other answers this is my code:
$("#change").on('click', function(){
var elem = $(this);
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
However it does not work, the problem seems to be the line "var elem = $(this)".
I also tried with getElementById, with no success. Could anyone help me find the bug?
My HTML code is:
<input type = "button" id = "change" value = 'Change to miles'> </button>
$("#change").on('click', function() {
var elem = $(this);
if (elem.val() == "Change to miles") {
elem.val("Change to kilometres");
} else {
elem.val("Change to miles");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles' />
Close html properly.
Use .val() to set and get data.
You have mixed javascript and jquery. $(this) is jQuery element so you need to use .val() method for getting/setting value. Not .value
If you want to use .value you need to pick the element instance using javascript. something like this :
$("#change").on('click', function() {
var elem = document.getElementById("change");
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles'/>
I generally use data attrib to identify the state of the element not the text on it, you can also use it this way :
$("#change").click(function(){
var elem = $(this);
if(elem.data("type") === "km"){
elem.val("Change to kilometers").data("type", "mil");
} else if(elem.data("type") === "mil"){
elem.val("Change to miles").data("type", "km");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "button" id = "change" value = 'Change to miles' data-type="km"/>
I was trying to change the value of an variable according to the status of an checkbox
here is my code sample
<script type="text/javascript">
if(document.getElementByType('checkbox').checked)
{
var a="checked";}
else{
var a="not checked";}
document.getElementById('result').innerHTML ='result '+a;
</script>
<input type="checkbox" value="1"/>Checkbox<br/>
<br/>
<span id="result"></span>
Can you please tell me whats the problem with this code.
Try this:
if (document.querySelector('input[type=checkbox]').checked) {
Demo here
Code suggestion:
<input type="checkbox" />Checkbox<br/>
<span id="result"></span>
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
var a = input.checked ? "checked" : "not checked";
document.getElementById('result').innerHTML = 'result ' + a;
}
input.onchange = check;
check();
}
</script>
In your post you have the javascript before the HTML, in this case the HTML should be first so the javascript can "find it". OR use, like in my example a window.onload function, to run the code after the page loaded.
$('#myForm').on('change', 'input[type=checkbox]', function() {
this.checked ? this.value = 'apple' : this.value = 'pineapple';
});
try something like this
<script type="text/javascript">
function update_value(chk_bx){
if(chk_bx.checked)
{
var a="checked";}
else{
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
</script>
<input type="checkbox" value="1" onchange="update_value(this);"/>Checkbox<br/>
<span id="result"></span>
Too complicated. Inline code makes it cool.
<input type="checkbox" onclick="yourBooleanVariable=!yourBooleanVariable;">
For those who tried the previous options and still have a problem for any reason, you may go this way using the .prop() jquery function:
$(document.body).on('change','input[type=checkbox]',function(){
if ($(this).prop('checked') == 1){
alert('checked');
}else{
alert('unchecked');
}
This code will run only once and check initial checkbox state. You have to add event listener for onchange event.
window.onload = function() {
document.getElementByType('checkbox').onchange = function() {
if(document.getElementByType('checkbox').checked) {
var a="checked";
} else {
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
}
I am trying to remove the style or the background of a textbox to reveal the content after 10 clicks. How can I do that on Javascript?
here is my html:
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000">
and here is my JS:
function check() {
var tries++;
if (tries == 10){
document.getElementById('firstN').disabled= true;
}
}
The problem is that tries is a local variable (local to the check function). Every time check is called, a new variable named tries is created and initialized to 0.
Try this instead:
var tries = 0;
function check() {
tries++;
if (tries == 10) {
document.getElementById('firstN').style.background = '#ffffff';
}
}
(I'm assuming that you already have some code to call check when the element is clicked. If not, you need to add a click handler to your element.)
You are instantiating a var "tries" everytime you go into this function. Move the variable up a level to where it will increment:
var btn = document.getElementById("btnclick");
btn.onclick = check;
var tries = 0;
function check() {
tries++;
if (tries == 10){
var ele = document.getElementById("firstN");
ele.value= "DISABLED";
ele.disabled = true;
}
}
EDIT:
Working JSFiddle
store it in a cookie:
<script type="text/javascript">var clicks = 0;</script>
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" value="Click" onclick="clicks++">
onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
Here you go. Remove the alert lines when you see that it works.
<html>
<head>
<title>Test</title>
<script>
function check(){
var getClicks = parseInt(document.getElementById('firstN').getAttribute('clicks')); //Get Old value
document.getElementById('firstN').setAttribute("clicks", 1 + getClicks); //Add 1
if (getClicks === 10){ //Check
alert('Locked');
document.getElementById('firstN').disabled= true;
} else {
alert(getClicks); //Remove else statement when you see it works.
}
}
</script>
</head>
<body>
<form action="#">
Input Box: <input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" onclick="check();" clicks="0">
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>