Question

所以我有一个小问题，而且我的意思是我花了整整一天摆弄这段代码而不去任何地方。问题是我有这些单选按钮组，我想得到它们的值，以便我可以在canvas元素上实现所选的颜色。我已经找到了我应该从当前所选按钮中提取值的部分，但问题是我无法从函数中获取值。

这是代码。这部分是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>

这部分是用户选择所需颜色的初始部分。我有第一组是蛇色，第二组是背景。这一切都应该没问题。

这是第二部分。这是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);

现在我要做的是获取所选颜色并将其插入到变量中，该变量将传递给另一个.js文件。那部分我想我可以自己解决。我一直在努力的事情是，当我试图调用这两个函数中的任何一个时，它只是返回未识别的。

我很确定问题出在函数范围内。我一直试图找到类似于我的问题，以免在这里打扰任何人，但似乎没有任何工作。

非常感谢任何帮助，我提前感谢你。

Answer 1

重新编辑：运行蛇色＆amp; 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>

Answer 2

因此，如果在全局范围内声明了变量，那么您需要使用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)

Answer 3

一种方法是将函数中的变量传递给other.js文件，并在other.js中执行任何操作。例如，

--------- ColorSettings.js -----------

function getRadioValSnake（）
{snakecolor = $('input:radio[name="snakecolor"]:checked').val(); fromcolorsettings(snakecolor);

}

---------- other.js ----------------

fromcolorsettings（scolor）的功能
{
alert(scolor);--do whatever you want here

}

继续将其识别为函数值

3 个答案: