Question

我有一个包含变量的三个部分的表单：第一部分是一个文本字段，要求用户输入一个数字让我们调用这个user_number;接下来，是一组单选按钮。其中三个，确定输出的'type'变量。我们称之为banner_type。最后，还有另一组单选按钮，这次是十六个。这些确定了输出的'style'变量，我们可以将其命名为banner_style 为了使脚本运行，有一个名为Generate的按钮。它不是一个提交按钮。最后，输出区域是一个div，它将显示正确的结果。

现在，此表单的目的是允许用户选择某种类型的图像，可以改变类型和样式，并为不同的用户输出不同的信息，因此这三个变量。

如果有帮助，这应该简化了Folding @ Home sig横幅的选择。编码如下：

<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>

Image URL: <div id="URL" style=display:inline;></div>

<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {
*SOMETHING NEEDS TO GO HERE*
document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + banner_style + banner_type;
});
</script>

所以我的最终目标是拥有基本图像地址，如脚本末尾所示，然后是用户编号，它应该是文本字段中用户输入的精确副本，然后是横幅样式，看起来像这样：

&c1=000000&c2=000000&c3=000000&c4=000000&c5=000000

每种不同的banner_style都会有所不同。每个值表示图像本身上不同元素的十六进制颜色代码。最后，横幅类型看起来像这样：

&bg=0

这将是0,1或2。

在这一点上，我应该说清楚我几乎没有使用过javascript，所以我需要清楚地向我解释一切，所以我也可以从中学习。另外，如果可能的话，像这样的id是纯JS ......没有jQuery的东西，或类似的东西。

Answer 1

Sheesh，没有jQuery？

让我首先给你jQuery版本，因为它更容易。

// load when page is done loading
$(function(){

  // jQuery is just like CSS in that you use selectors to target a node element
  $("#Generate").on("click", function(){

    // get form values for each style we need
    var user = $('#user_number').val();
    var style = $('form input[name=banner_type]:checked').val();
    var type = $('form input[name=banner_style]:checked').val();

    // set image variable by concatenating the values together
    var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

    // insert image path using the image variable set above into element with id of "URL"
    $("#URL").html( image );
  });

}); // close jquery on page load

现在用简单的JavaScript ......就在这里。

// have to iterate each group to obtain the value
// function has borrowed from http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
}

var user = document.getElementById('user_number').value;
var style = getCheckedValue('banner_style');
var type = getCheckedValue('banner_type');

// set image variable
var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

// insert image into element node with ID of "URL"
document.getElementById("URL").innerHTML = image;

整数+ 2x单选按钮设置输入 - ＆gt;产量

1 个答案: