Question

<FORM>
    <input type="radio" name="select" id="select1" value="babai" />
        <label for="select1"><img src="Thesis pictures/girl.jpg" alt="Babai" style=width:150px; height=150x;/><br>Babai</label>
        </div>
    <div id="selection2">   
    <input type="radio" name="select" id="select2" value"lalaki"/>
        <label for="select2"><img src="Thesis pictures/boy.jpg" alt="lalaki" style=width:150px; height=150x; /><br>Lalaki</label>
    </div>
    <div id="selection3">
    <input type="radio" name="select" id="select3" value="aso"/>
        <label for="select3"><img src="Thesis pictures/dog.jpg" alt="aso" style=width:150px; height=150x;/><br>Aso</label>
    </div>
    </FORM>

这是我的页面的HTML，里面有图片。我想要的是，如果你点击图片或收音机，它会立即播放音频。

我的javascript在我测试的另一个文件中，它已连接。

function doFirst(){
    item1=document.getElementById('select1');
    item2=document.getElementById('select2');
    item3=document.getElementById('select3');
    var audio1 = new Audio('audio/babai.wav');
    var audio2 = new Audio('audio/lalaki.wav');
    var audio3 = new Audio('audio/aso.wav');

    item1.addEventListener('click',plays1,false);
    item2.addEventListener('click',plays2,false);
    item3.addEventListener('click',plays3,false);


}

function plays1(){
    audio1.play();
}

function plays2(){
    audio2.play();
}

function plays3(){
    audio3.play();
}


window.addEventListener('load',doFirst,false);

我使用此代码，如果单击任何图片，则没有任何反应。你们可以帮我解决这个问题并帮助我简单地完成我的代码我会从内心深处感谢你。

Answer 1

您可以使用window.addEventListener('load',doFirst,false);

而不是window.onload(doFirst());

您可以为每个电台添加onclick属性。例如：

<img src="Thesis pictures/dog.jpg" onclick="plays3()" alt="aso" style=width:150px; height=150x;/>

此外，3个音频变量仅存在于doFirst()方法中。您需要在函数之外声明它们，并且可以在其中分配它们。您还没有显示3项变量的声明，确保它们在var之前正确声明。

Answer 2

您在广播中添加了一个点击列表器。它仅在单击单选按钮而不是图像时有效。但您可以以类似的方式向图像标签添加侦听器。

Here is a fiddle你可以搞乱它。

var imgClickable = document.getElementById('clickable');
imgClickable.onclick = function(){
        alert('clicked Image');
    };

Answer 3

您已在初始化功能中定义了audio1-3，它们的范围受限于该功能，因此在您点击时它们不可用于其他功能。

将audio1-3移动到函数范围之外，作为全局变量或某种包装器。

为此，请将以下行移到doFirst（）函数之外：

    searchTimeoutID;
    InitQuickSearch = function() {
        $( 'input#quick-search' ).autocomplete({
            source: []
        });

        $('input#quick-search', document).on('keyup', function(e) {
            switch(e.which) {
                default: // live search
                    window.clearTimeout(searchTimeoutID); // remove timer
                    var str = $(this).val(); // search string
                    if (str !== '') { // do the search
                        searchTimeoutID = window.setTimeout(LiveSearch, 100);
                    }
                break;
            }
        });
    };

    LiveSearch = function() {
        var str = $('input#quick-search').val();
        if(str !== '') {
            $.ajax({
                type: 'POST',
                url: '/livesearch',
                data: { query: str },
                cache: false,
                success: function(data){
                    var results = data.split(',');
                    alert(results); // displays correct results here

                    $( 'input#quick-search' ).autocomplete( 'option', { source: results });
                },
                error: function(response) {
                    printError(response);
                }
            });
        }
        return false;
    };

检查单击按钮或单击时播放音频

3 个答案: