图像名称以未定义的形式返回，但仅用于某些

Question

简而言之:我使用相同的JS函数旋转一个可能来自几个类别的图像，它对除1以外的所有类别都能很好地工作。

详细信息:我正在编写一个javascript应用程序来制作鸡尾酒食谱。菜谱的成分通过php/mysql导入到javascript。我在JavaScript &PHP中测试了这些变量，它们都被正确地填充了。

//Function to store db table in to two dimensional $array[id][attribute]

function getRows($table, $mysql) {

$query = "SELECT * FROM ".$table;
$result = mysqli_query($mysql, $query);
$num = mysqli_num_rows($result);

if ($num > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        // You have $row['id'], $row['name'], $row['image']

            $var[$row['id']] = array('id' => $row['id'], 'name' => $row['name'], 'image' => $row['image']);
            $var['num'] = $num;


    }

}
return $var;
}

//Use the function above to populate all the PHP variables, then convert each to Javascript


echo "<script>\n";
$actions = getRows('actions', $mysql);
$js_actions = json_encode($actions);
echo "var actions = ". $js_actions . ";\n";

$bottles = getRows('bottles', $mysql);
$js_bottles = json_encode($bottles);
echo "var bottles = ". $js_bottles . ";\n";

$garnishes = getRows('garnishes', $mysql);
$js_garnishes = json_encode($garnishes);
echo "var garnishes = ". $js_garnishes . ";\n";

$mixers = getRows('mixers', $mysql);
$js_mixers = json_encode($mixers);
echo "var mixers = ". $js_mixers . ";\n";

将此输出到浏览器。

<script>
var actions = {"1":{"id":"1","name":"Stir","image":"stir.png"},"num":3,"2":{"id":"2","name":"Shake","image":"ShakeAndStrain.png"},"3":{"id":"3","name":"Muddle","image":"muddle.png"}};
var bottles = {"1":{"id":"1","name":"Bourbon","image":"jim_beam.png"},"num":2,"2":{"id":"2","name":"Sugar","image":"GARNISH_SugarCube.png"}};
var garnishes = {"1":{"id":"1","name":"Orange and Cherry","image":"GARNISH_orange-AND-cherry.png"},"num":2,"2":{"id":"2","name":"Sugar Cube","image":"GARNISH_SugarCube.png"}};
var mixers = {"1":{"id":"1","name":"Water","image":"Not yet"},"num":4,"2":{"id":"2","name":"Soda","image":"SODA_7UP_soda_dispenser_soda_gun.png"},"3":{"id":"3","name":"Bitters","image":"BITTERS_blood_orange_bitters.png"},"4":{"id":"4","name":"Sugar","image":"GARNISH_SugarCube.png"}};
</script>

对于饮料的每一种成分，都有两个下拉菜单，它们位于图像上方。第一滴，你可以选择行动，瓶子，搅拌机，或装饰。当您选择其中一个类别时，它会将存储在相应mysql表中的成分填充到第二个下拉列表中。

function configureDropDownLists(select1,select2,actions,bottles,mixers,garnishes) {

    switch (select1.value) {
        case 'action':
            document.getElementById(select2).options.length = 1;
            for (i = 1; i <= actions['num']; i++) {
                createOption(document.getElementById(select2), actions[i]['name'], actions[i]['id'], actions[i]['image']);
            }
            break;
        case 'bottle':
            document.getElementById(select2).options.length = 1; 
        for (i = 1; i <= bottles['num']; i++) {
            createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id']), bottles[i]['image'];
            }
            break;
        case 'mixer':
            document.getElementById(select2).options.length = 1;
            for (i = 1; i <= mixers['num']; i++) {
                createOption(document.getElementById(select2), mixers[i]['name'], mixers[i]['id'], mixers[i]['image']);
            }
            break;
         case 'garnish':
            document.getElementById(select2).options.length = 1;
            for (i = 1; i <= garnishes['num']; i++) {
                createOption(document.getElementById(select2), garnishes[i]['name'], garnishes[i]['id'], garnishes[i]['image']);
            }
            break;
            default:
                document.getElementById(select2).options.length = 0;
            break;
    }

}

function createOption(select1, text, value, image) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    opt.myImage = image;
    select1.options.add(opt);
}

那下面..。

                      <td>
                    <select id="step1" name='step1' onChange="configureDropDownLists(this,'step1_id',actions,bottles,mixers,garnishes)">
                        <option value="0">Choose category</option>
                        <option value="action">Action</option>
                        <option value="bottle">Bottle</option>
                        <option value="mixer">Mixer</option>
                        <option value="garnish">Garnish</option>
                    </select>
                  </td>
                  <td>
                    <select id='step2' name='step2'  onChange="configureDropDownLists(this,'step2_id',actions,bottles,mixers,garnishes)">
                        <option value="0">Choose category</option>
                        <option value="action">Action</option>
                        <option value="bottle">Bottle</option>
                        <option value="mixer">Mixer</option>
                        <option value="garnish">Garnish</option>
                    </select>
                  </td>

然后，我使用另一个JavaScript函数根据第二个下拉菜单中的成分选择来翻转图像。

这是我的功能：

    function changePicture(selectbox,thisImage) {
    var selection = document.getElementById(selectbox).selectedIndex; //grabs what user selected
    var image = document.getElementById(selectbox).options[selection].myImage;  //store image in variable
    document.getElementById(thisImage).src = 'img/' + image; //change the image
}

那下面..。

                      <td>
                    <select id='step1_id' name='step1_id' onChange="changePicture('step1_id','step1_image')">
                        <option value='0'>Choose object</option>
                    </select>
                  </td>
                  <td>
                    <select id='step2_id' name='step2_id' onChange="changePicture('step2_id','step2_image')">
                        <option value='0'>Choose object</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <img id='step1_image' name='step1_image' src='img/Willsmallimage.jpg'>
                  </td>
                  <td>
                    <img id='step2_image' name='step2_image' src='img/Willsmallimage.jpg'>
                  </td>
                </tr>

问题是，除了瓶子之外，它永远都是完美的。我尝试过更改图像，但它只能在其他表中工作。从来不在瓶子桌上工作。在FireBug中，它说当我从表中选择一个成分时，这个函数将返回'img/undefined‘。有什么想法吗？

Answer 1

在configureDropDownLists()中，您有一个错误的错误(一个错误的结束paren)。更改这一行：

createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id']), bottles[i]['image'];

对此：

createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id'], bottles[i]['image']);

这个错误的后果是，该映像没有被传递给createOption，因此总是没有定义。

在将来，在createOption()中放置一个断点并观察它是如何创建选项的，这样就可以看到在创建瓶子选项时图像始终是undefined。这将指向错误的代码行--尽管它仍然是一个微妙的错误。