1

どのラジオボタンが選択されているかに基づいて、ウェブページに国の旗を表示する割り当てを行っています。割り当ての目的は、Javascript を使用して img 要素の src 属性を変更することです。関数は次の章までカバーされていないため、関数を使用することになっているとは思いません。現在の章のすべてのガイドに従いましたが、画像ではなくテキストの変更についてのみ説明しています。

これが私のコードです：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Flags</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form name="CountryList" method="get">
            <table>
                <tr>
                    <td>
                        <input type="radio" name="country" onclick="document.ProductImage.src='argentina.jpg'" />Argentina
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='australia.jpg'" />Australia
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='bolivia.jpg'" />Bolivia
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='cuba.jpg'" />Cuba
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='finland.jpg'" />Finland
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='france.jpg'" />France
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='italy.jpg'" />Italy
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='peru.jpg'" />Peru
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='syria.jpg'" />Syria
                        <br />
                        <input type="radio" name="country" onclick="document.ProductImage.src='tunisia.jpg'" />Tunisia
                    </td>
                    <td>
                        <a><img id="ProductImage" src="" alt="Flag" /></a>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

関数なしで img src 属性を変更することが不可能かどうか、誰かが私を正しい方向に向けることができますか?

ありがとう！

4

6 に答える 6

1

そのようにすべてインラインで行う予定がある場合は、変更してください

document.ProductImage.src

に

document.getElementById('ProductImage').src

そして、すべてがうまくいくでしょう。

ただし、コードを 1 か所に保持する関数を呼び出す必要があります (画像の ID が変更された場合はどうでしょうか?)。

于 2013-03-12T19:53:49.253 に答える
0

画像を適切に選択していませんdocument.getElementById("ProductImage").src = ...。関数を使用することを強くお勧めしますが、インライン ハンドラーは廃止されました。

于 2013-03-12T19:53:55.157 に答える
0

私が間違っていなくて、そうでないように見える場合、は属性が に設定されたタグをdocument.ProductImage参照します。ID で要素を参照している場合は、代わりに を使用してください。imgnameProductImagedocument.getElementById()

あなたの修正：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Flags</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form name="CountryList" method="get">
            <table>
                <tr>
                    <td>
                        <input type="radio" name="country" onclick="updateProductImage('argentina.jpg')" />Argentina
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('australia.jpg')" />Australia
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('bolivia.jpg')" />Bolivia
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('cuba.jpg')" />Cuba
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('finland.jpg')" />Finland
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('france.jpg')" />France
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('italy.jpg')" />Italy
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('peru.jpg')" />Peru
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('syria.jpg')" />Syria
                        <br />
                        <input type="radio" name="country" onclick="updateProductImage('tunisia.jpg')" />Tunisia
                    </td>
                    <td>
                        <a><img id="ProductImage" name="ProductImage" src="" alt="Flag" /></a>
                    </td>
                </tr>
            </table>
        </form>
        <script>
            function updateProductImage(src) {
                document.ProductImage.src = src || 'no-image.jpg'; // Set image source to given source or no image of no source specified.
                // Or use document.getElementById("ProductImage").src instead.
                return true; // Continue with the click event.
            }
        </script>
    </body>
</html>

おまけとして。上記のコードの実例: http://jsbin.com/ihimay/1/edit

関数は次の章までカバーされていないため、関数を使用することになっているとは思いません。

乱雑なインライン JavaScript の代わりにクリーンなコードを生成することで、いくつかのボーナス ポイントを獲得できると考えました。関数を使用するオプションが実際にない場合は、単純に置き換えupdateProductImage('argentina.jpg')ますdocument.ProductImage.src = 'argentina.jpg' || 'no-image.jpg'

于 2013-03-12T19:54:03.477 に答える
0

試す：

document.getElementById('ProductImage').src='bolivia.jpg'

等々...

于 2013-03-12T19:52:35.963 に答える
0

に変更<img idする<img nameと、Chrome で動作するように見えます。

于 2013-03-12T19:56:58.233 に答える