So I have a slight problem, and by slight I mean I've spent the entire day fiddling with this code and not going anywhere. What the problem is that I have these groups of radio buttons, and I want to get their value so that I can implement the chosen colour on the canvas element. I've figured out the part where I'm supposed to extract the value from the currently selected button, but the problem is that I cant get the value out of the function.
Here's the code. This part is the index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style_settings.css">
</head>
<body>
<div id="settings"><h1>Customise your game</h1>
<form id="colorformsnake" name="colorformsnake" onchange="getRadioValSnake()"><label>Choose the snake color: <br/><br/>
Green: <input type="radio" id="green" value="green" name="snakecolor"><br /><br />
Red: <input type="radio" id="red" value="red" name="snakecolor" /><br /><br />
Blue: <input type="radio" value="blue" id="blue" name="snakecolor"></label><br /><br/><br /></form>
<form id="colorformbg" onchange="getRadioValBg()" name="colorformbg">
<label>Choose the background color: <br /><br/>
Gray: <input type="radio" id="gray" value="gray" name="bgcolor" checked><br /><br />
White: <input type="radio" id="white" value="white" name="bgcolor"/><br /><br />
Black: <input type="radio" value="black" id="black" name="bgcolor"></label><br /><br><br /></form>
</div>
<script src="javascript/jquery-3.0.0.min.js"></script>
<script src="javascript/colorsettings.js"></script>
<script src="javascript/initial_config.js"></script>
<script src="javascript/draw.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/ajax.js"></script>
</body>
</html>
This part is the initial part where the user chooses the wanted colours. I have the first group which is the snake colour and the second which is the background. Everything in this should be fine.
Here's the second part. This is colorsettings.js
var snakecolor=" ";
var bgcolor="";
function getRadioValSnake()
{
window.snakecolor=($('input[name="snakecolor"]:checked', '#colorformsnake').val());
return snakecolor;
}
function getRadioValBg()
{
window.bgcolor=($('input[name="bgcolor"]:checked', '#colorformbg').val());
return bgcolor;
}
var snakecolorCurrent=getRadioValSnake();
console.log(snakecolorCurrent);
Now what I want to do is to take the selected colour and insert it into a variable, which will be passed to an another .js file. That part I think I can solve by myself. The thing that I've been struggling with is that when i try to call any of those 2 functions it just returns unidentified.
I'm pretty sure that the problem is in the scope of the function. I've been trying to find a problem similar to mine in order to not bother anyone on here but nothing seems to work.
Any help is greatly appreciated and I thank you in advance.
Re-Edit: Running snake color & bg :)
var snakecolorCurrent = "";
var bgcolorCurrent = "";
$("input[name='snakecolor']").change(function() {
var snakecolor = $('input[name="snakecolor"]:checked');
snakecolorCurrent = snakecolor.val();
snakecolor = snakecolorCurrent;
console.log(snakecolor);
console.log(snakecolorCurrent);
return snakecolor;
});
$("input[name='bgcolor']").change(function() {
var bgcolor = $('input[name="bgcolor"]:checked');
bgcolorCurrent = bgcolor.val();
bgcolor = bgcolorCurrent;
console.log(bgcolor);
console.log(bgcolorCurrent);
return bgcolor;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="colorformsnake" name="colorformsnake">
<label>Choose the snake color:
<br/>
<br/> Green:
<input type="radio" id="green" value="green" name="snakecolor">
<br />
<br /> Red:
<input type="radio" id="red" value="red" name="snakecolor" />
<br />
<br /> Blue:
<input type="radio" value="blue" id="blue" name="snakecolor">
</label>
<br />
<br/>
<br />
</form>
<form id="colorformbg" name="colorformbg">
<label>Choose the background color:
<br />
<br/> Gray:
<input type="radio" id="gray" value="gray" name="bgcolor" checked>
<br />
<br /> White:
<input type="radio" id="white" value="white" name="bgcolor" />
<br />
<br /> Black:
<input type="radio" value="black" id="black" name="bgcolor">
</label>
<br />
<br>
<br />
</form>
so if declared variable in global scope then you do need to call it with window
demo
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style_settings.css">
<script src="javascript/jquery-3.0.0.min.js"></script>
<script src="javascript/colorsettings.js"></script>
<script src="javascript/initial_config.js"></script>
<script src="javascript/draw.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/ajax.js"></script>
</head>
<body>
<div id="settings"><h1>Customise your game</h1>
<form id="colorformsnake" name="colorformsnake" onchange="getRadioValSnake()"><label>Choose the snake color: <br/><br/>
Green: <input type="radio" id="green" value="green" checked="checked" name="snakecolor"><br /><br />
Red: <input type="radio" id="red" value="red" name="snakecolor" /><br /><br />
Blue: <input type="radio" value="blue" id="blue" name="snakecolor"></label><br /><br/><br /></form>
<form id="colorformbg" onchange="getRadioValBg()" name="colorformbg">
<label>Choose the background color: <br /><br/>
Gray: <input type="radio" id="gray" value="gray" name="bgcolor" checked="checked"><br /><br />
White: <input type="radio" id="white" value="white" name="bgcolor"/><br /><br />
Black: <input type="radio" value="black" id="black" name="bgcolor"></label><br /><br><br /></form>
</div>
</body>
</html>
js:
function getRadioValSnake()
{
snakecolor=($('input[name="snakecolor"]:checked').val());
return snakecolor;
}
function getRadioValBg()
{
bgcolor=($('input[name="bgcolor"]:checked').val());
return bgcolor;
}
var snakecolorCurrent=getRadioValSnake();
alert(snakecolorCurrent)
one way is to pass the variable in function to other.js file and do whatever you want in other.js For example,
---------ColorSettings.js-----------
function getRadioValSnake(){
snakecolor = $('input:radio[name="snakecolor"]:checked').val();
fromcolorsettings(snakecolor);
}
----------other.js----------------
function fromcolorsettings(scolor)
{
alert(scolor);--do whatever you want here
}
Related
This code works on online compilers as well as stackoverflow but why not on my web host as well as localhost.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});</script></head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" /></body>
</html>
Your head and body tags are intermingled. I've updated it to correctly show the head and body sections.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
</body>
</html>
Your Javascript is running too early, before any HTML elements (your radio buttons) are present. Your selector $('.radiogroup') then does not find anything, and nothing happens when you click the radio buttons.
Either move your Javascript at the end before the </body> closing tag or wrap your code in jQuery's .ready like so:
$(document).ready(function(){
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
})
Your head and body tags are intermingled and if u want to use html5 you don't need to define the script-type, and you don't have to declare not-closed-tags with trailing backslash.
If you want to use an earlier version of html use the type.
If you want to use xhtml you have to use trailing backslashes for not-closed-tags.
Edit: I figured out, that your code is triggered before the Elements are rendered, so you try to add a event-handler to Elements that are not present at that time. Adding $(function() {}); around your code will force jQuery to run the code after document-ready event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('.radiogroup').on('change', function() {
$('#amount').val(this.value);
});
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5">
<input type="radio" name="radiogroup" class="radiogroup" value="10">
<input type="radio" name="radiogroup" class="radiogroup" value="15">
<input type="radio" name="radiogroup" class="radiogroup" value="20">
<br><br>
<input type="text" name="amount" id="amount">
</body>
</html>
I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>
Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />
You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>
function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox
First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>
Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>
Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>
In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.
I need help with this code. I keep getting the error changeBG is not defined.
The way the code should work is when I select a radio button the background changes. If I change the function to an inline function inside the onclick event then it works but if I move the funtion to script section it doesn't work for example:
<input type="radio" id="red" name="change1" value=1 onclick="document.body.style.backgroundColor='red'" /><label for="red">Red</label><br />
WORKS at changing the background red
but when I make a function in the script section and call the function in the onlick event it doesn't work,
Example of code that is not working:
Script:
<script type="text/javascript">
function changeBG(n)
{
if (n==1)
document.body.style.backgroundColor='red'";
if (n==2)
document.body.style.backgroundColor='yellow'";
if (n==3)
document.body.style.backgroundColor='green'";
if (n==4)
document.body.style.backgroundColor='orange'";
}
</script>
HTML:
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label><br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label><br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label><br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label><br />
</form>
backgroundColor='red'"
backgroundColor='yellow'"
backgroundColor='green'"
backgroundColor='orange'"
You see those extra " quotemarks? Get rid of them.
Your working code
In Firefox this gives the following console error. You should learn how to do some simple debugging so you can catch these errors early.
SyntaxError: unterminated string literal
Use proper quotes. You had used wrong extra quotes. like ''". Since these extra quote made JS error, you are error i.e. function not defined.
Change js to following.
function changeBG(n) {
if (n == 1)
document.body.style.backgroundColor = 'red';
if (n == 2)
document.body.style.backgroundColor = 'yellow';
if (n == 3)
document.body.style.backgroundColor = 'green';
if (n == 4)
document.body.style.backgroundColor = 'orange';
}
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label>
<br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label>
<br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label>
<br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label>
<br />
</form>
i am trying to output form values with inner.html
I got 2 problems with my checkboxes:
1. if i check more then 1 checkbox, only one is outputted
2. if no checkbox is checked, the input from other fields are also not outputted
How can i fix this problem?
<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = document.querySelector('.color:checked').value;
document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>
<form method="get" onsubmit="return changeText()">
<input type="text" name="name" id="name" />
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
document.querySelector only gets one single element, the first one encountered, you'd use document.querySelectorAll to get all matching elements, and you can convert that to an array and use map to return a concantenated string of the values, like this :
<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = Array.prototype.slice.call(document.querySelectorAll(".color:checked")).map(function(el) {
return el.value;
}).join(', ')
document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>
<form method="get" onsubmit="return changeText()">
<input type="text" name="name" id="name" />
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
FIDDLE
I need to change the text before the input based on "year" entered on the input field,
and when changing the "Years to Show", disable the unnecessary income/assets fields.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
window.onload=function() {
// On "year" change, validate it and cahnge the text befor the input fields.
var year = document.getElementsByName("year");
year.onclick=function() {
this.year0_text.value = year[this.value];
this.year1_text.value = year[this.value]+1;
this.year2_text.value = year[this.value]+2;
}
// and on "years" change, disable the unnecessary income/assets fields.
}
</script>
</head>
<body>
<form name="ar" action="." method="post">
Year:<br />
<input type="number" name="year" value="2011"><br />
<br />
Years to Show:<br />
<input type="radio" name="years" value="0.5">first period (not full year)<br />
<input type="radio" name="years" value="1">1 year<br />
<input type="radio" name="years" value="2">2 years<br />
<input type="radio" name="years" value="3">3 years<br />
<br />
Income:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_income" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_income" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_income" value="0"><br />
<br />
Assets:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_assets" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_assets" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_assets" value="0"><br />
</form>
</body>
</html>
DEMO - http://jsfiddle.net/92GaE/2/
Whats up rami? (ma kore?)
Just add an event listener, you may want to take a look at this for instance:
Event Listeners