簡體   English   中英

JavaScript新手。 我試圖將單選按鈕的值作為javascript函數中對象的名稱傳遞

[英]new to javascript. I am trying to pass the value of a radio button as the name of an object in a javascript function

我有一個稱為語音的功能。 它接收一個充滿句子片段數組的對象,並吐出一個隨機短語。 我有兩個這樣的對象。 每個都有唯一的句子片段。 通過單選按鈕,我希望能夠選擇通過該功能發送的對象,然后按下一個按鈕以實現此目的。 當我使用其中一個按鈕對功能進行硬連線時,它可以正常工作,但這不是我想要的。 我已經嘗試了本網站和其他一些沒有運氣的建議方法。 我得到的最接近的是何時可以將對象的名稱輸入到語音函數中,但是它只能識別為字符串。 這是我的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);
}

};

這里有一些問題。

首先,您不能將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

接下來,你必須了解什么this是在你輸入元素的onClick處理程序。 在這種情況下, 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 */
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM