新手到javascript。我试图传递一个单选按钮的值作为javascript函数中对象的名称

时间:2014-09-04 23:05:01

标签: javascript html forms radio-button

我有一个名为speak的功能。它接收一个填充了句子片段数组的对象并吐出一个随机短语。我有两个这样的对象。每个都有独特的句子片段。通过单选按钮,我希望能够选择通过该功能发送的对象,然后按一个按钮来实现。当我用其中一个按钮硬连接该功能时,它工作正常,但这不是我想要的。我已经尝试了几个不同的建议方法从这个网站和其他没有运气。我得到的最接近的是当我可以将对象的名称放入speak函数时,但它只被识别为字符串。这是我的HTML ...

    <html>
<head>

</head>
<body>
<!--    <script type="text/javascript" src="wrestlingGame.js"></script> -->
    <div>
        <input type="radio" name="speak" value=ToolBelt.commentary onClick="ToolBelt.handleClick(this)">commentary a<br/>
        <input type="radio" name="speak" value=ToolBelt.commentary1 onClick="ToolBelt.handleClick(this)">commentary b<br/>
    </div> 
    <button onclick="ToolBelt.speak()">Commentary</button>
    <div id="commentator"></div>
    <div id="lif"></div>

</body>

此版本未连接到“评论”按钮。它改为连接到单选按钮本身,但它无法正常工作。我发布这个是因为这是我最近的尝试。 这是我完整的JavaScript,包括两个对象和说话功能...

    var ToolBelt = {

commentary:{
exclamations: ["Wow! ", "Oh no! ", "God almighty! ", "Good Gracious! "],
leadIn: ["That was a nasty ", "What a powerful ", "A horrifying ", "That was an illegal "], 
strikes: ["uppercut!", "chairshot!", "Lucy lick!", "monkey punch!", "jab", "Bug meow!", "dropkick!"],
},

commentary1:{
exclamations: ["Moo! ", "Quack! ", "Bark! ", "Growl! "],
leadIn: ["Chupa chup ", "Spaghetti ", "Bubbling ", "Necktie "], 
strikes: ["uppercut!", "chairshot!", "Lucy lick!", "monkey punch!", "jab", "Bug meow!", "dropkick!"],
},

handleClick:function(object){
    this.speak(object.value);
},

speak:function(i){


    var string='';

    for(key in i){
        var arr = i[key];
        var x = this.random(0,arr.length);

        string += arr[x] + " ";
    }

    document.getElementById("commentator").innerHTML = string;
},

random: function(max, min){
    return Math.floor(Math.random()*(max-min)+min);
}

};

1 个答案:

答案 0 :(得分:0)

这里有一些问题。

首先,您不能将JavaScript对象指定为输入元素的值。输入元素值只能是字符串。我们可以用这个值做的是让它包含我们想要定位的ToolBelt对象的键:

<input type="radio" name="speak" value="commentary" onClick="ToolBelt.handleClick(this)">commentary a
<br/>
<input type="radio" name="speak" value="commentary1" onClick="ToolBelt.handleClick(this)">commentary b

接下来,您必须了解输入元素上onClick处理程序中this的内容。在此上下文中,this指的是DOM元素本身。因此,在ToolBelt.handleClick方法中,我们希望从传递的DOM元素中获取值:

handleClick: function (el) {
    this.speak(this[el.value]);
}

这将有效,但只要我们检查其中一个单选按钮,它就会生成注释。但是,“评论”按钮的存在表明我们只想在单击此按钮时生成评论。要实现此目的,我们必须在speak方法中移除对handleClick的调用,而是缓存当前选定的评论密钥:

currentCommentaryKey: null,
handleClick: function (el) {
    this.currentCommentaryKey = el.value;
}

然后我们将改变speak方法以使用缓存密钥(我添加了一个检查以确保当前的注释密钥有效):

speak: function () {
    if (!this.hasOwnProperty(this.currentCommentaryKey)) { return; }
    var i = this[this.currentCommentaryKey];
    /* rest of speak method implementation */
}