.click在Javascript中没有任何效果 - 应该基于数组更新两个元素

.click in Javascript not having any effect - should update two elements based on array

本文关键字：数组 于数组 更新 元素 两个 Javascript 任何效 click      更新时间：2023-09-26

我对javascript相当陌生，并试图创建一个语言学习工具，可以播放音乐视频中的剪辑并显示翻译。我正在使用数组来组织和访问链接和翻译。但是，我一定遗漏了一些基本的东西，因为单击短语元素以显示每个视频和翻译不起作用。

http://jsfiddle.net/KireniaV/XaK7G/1/

我使用拼接创建了剪辑，并通过iFrame显示它们（也尝试嵌入视频剪辑，但无论哪种方式都遇到了同样的问题）。

.HTML： 

<body>
    <div class="nav">
        <ul>
            <li id="phrase1">Ne dunun bamimyon byori doeji</li>
            <li id="phrase2">naui jibun dwidgolmog dalgwa byori tujiyo</li>
            <li id="phrase3">dubon dashin sengson gage tolji anha</li>
            <li id="phrase4">sorobge uldon naldul nanun wetorirane</li>
        </ul>
    </div>
    <div class="content">
<h3>Nangman Goyangi (Romantic Cat)</h3>

<h4>by Cherry Filter, lyrics and translation courtesy of DavichiLyrics</h4>
        <iframe id="player" title="player" src="http://www.youtube.com/v/U6EcOiKWfZI" width="341" height="192" frameborder="0" marginheight="0" marginwidth="0" id="myframe">You can't see iFrames :(.</iframe>
        <p id="text">Select a phrase from the song (to either side) to view a video clip, transcription, and translation!</p>
    </div>
    <div class="nav">
        <ul>
            <li id="phrase5">Ijen badaro tonalgoeyo (do jayurobge)</li>
            <li id="phrase6">gomiro gumulchyoso mulgogi jaburo</li>
            <li id="phrase7">Nanun nangman goyangi</li>
            <li id="phrase8">sulphun doshirul bichwo chumchunun jagun byolbid</li>
        </ul>
    </div>
</body>

.CSS：

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    cursor:pointer;
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#889999;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
li:hover {
    background-color:#999988;
}
.nav {
    float: left;
}
.content {
    float: left;
    width: 341px;
}

Javascript：

var videos = [];
videos[1] = "http://www.youtube.com/v/U6EcOiKWfZI&start=26&end=31";
videos[2] = "http://www.youtube.com/v/U6EcOiKWfZI&start=31&end=37";
videos[3] = "http://www.youtube.com/v/U6EcOiKWfZI&start=38&end=42";
videos[4] = "http://www.youtube.com/v/U6EcOiKWfZI&start=43&end=49";
videos[5] = "http://www.youtube.com/v/U6EcOiKWfZI&start=49&end=54";
videos[6] = "http://www.youtube.com/v/U6EcOiKWfZI&start=55&end=60";
videos[7] = "http://www.youtube.com/v/U6EcOiKWfZI&start=60&end=65";
videos[8] = "http://www.youtube.com/v/U6EcOiKWfZI&start=65&end=72";

var translations = [];
translations[1] = "In the dark night, My eyes become stars.";
translations[2] = "I won’t rob a fish market again.";
translations[3] = "My weeping days and days, I’m quite alone.";
translations[4] = "Now, I will go to the sea.";
translations[5] = "To catch fish using spider’s web.";
translations[6] = "I’m a romantic cat.";
translations[7] = "I’m a tiny star twinkling over the lonely city.";
translations[8] = "My deep and sad sea, it has gone away.";
function changePhrase3(clicked) {
    var oldText = document.getElementById('text').innerHTML;
    var newText = translations[clicked];
    oldText = newText;
    document.getElementById('player').src = videos[clicked];
}
document.getElementById('phrase1').click(changePhrase(1));
document.getElementById('phrase2').click(changePhrase(2));
document.getElementById('phrase3').click(changePhrase(3));
document.getElementById('phrase4').click(changePhrase(4));
document.getElementById('phrase5').click(changePhrase(5));
document.getElementById('phrase6').click(changePhrase(6));
document.getElementById('phrase7').click(changePhrase(7));
document.getElementById('phrase8').click(changePhrase(8));

只是一个错别字和无效的调用。

我刚刚修复了它。 请结帐小提琴

第一个重命名函数changePhrase3为 changePhrase（3 是拼写错误）。

其次，您应该像这样绑定单击功能。（不需要#，请使用onclick代替click）

document.getElementById('phrase1').onclick = function(){ changePhrase(1) };

因为如果你像document.getElementById('phrase1').click(changePhrase(1));一样绑定，意味着你把result of changePhrase(1)发送到click函数。 所以你必须在功能上扭曲它。

第三次修改changePhrase像这样

function changePhrase(clicked){
    var newText = translations[clicked]; // get new text
    document.getElementById('text').innerHTML = newText; // assign to the old one
    document.getElementById('player').src = videos[clicked];
}
这里有

一些小问题，

首先，正如 Patrick Evans 在评论中指出的那样，您的函数名称或函数调用中存在拼写错误。确保这些匹配。

其次，click()是一个jQuery方法;你使用的是直接JS，所以你想使用"onclick"：

http://www.w3schools.com/jsref/event_onclick.asp

最后，getElementById不需要"#"符号。你在帖子的代码中已经有了这个，但在小提琴中没有。只需仔细检查一下您的实际代码中的情况。

总而言之，您应该为点击事件侦听器获得类似的东西：

document.getElementById('phrase1').onclick=function(){changePhrase3(1)};

将autoplay=1添加到您的YouTube链接中，以便它们立即播放。

将一些 jQuery 函数click()更改为普通的 javascript onclick。

你不关心旧文本是什么，只关心容器是什么，以便你可以更新它，对吗？ 这应该可以帮助您入门：

var txtContainer = document.getElementById('text');
var newText = translations[clicked];
txtContainer.innerHTML = newText;
document.getElementById('player').src = videos[clicked];

结果如下：http://jsfiddle.net/zyglobe/XaK7G/3/

Gomiro gumulchyoso mulgogi jaburo。

相关文章：