aleksxp aleksxp - 4 months ago 5
Javascript Question

Keep getting undentified as a function value

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">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style_settings.css">


<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>
<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>

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();


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.


Edit: Running snake color, didn't do bg, but you get idea! :)

$("input[name=snakecolor]").on('change', function getRadioValSnake(){
    var snakecolor = $('input[name="snakecolor"]:checked');
    var snakecolorCurrent = snakecolor.val();
    snakecolor = snakecolorCurrent;
    return snakecolorCurrent;
<script src=""></script>
<form id="colorformsnake" onchange="return getRadioValSnake()">
  <label>Choose the snake color:
    <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">
  <br />
  <br />