Fatal编程技术网
  • javascript/
  • 。在Javascript中单击没有任何效果-应根据数组更新两个元素

。在Javascript中单击没有任何效果-应根据数组更新两个元素

javascript html css arrays

。在Javascript中单击没有任何效果-应根据数组更新两个元素,javascript,html,css,arrays,click,Javascript,Html,Css,Arrays,Click,我对javascript相当陌生，正在尝试创建一个语言学习工具，它可以播放音乐视频片段并显示翻译。我使用数组来组织和访问链接和翻译。然而，我一定遗漏了一些重要的东西，因为点击短语元素来显示每个视频和翻译没有任何效果 我创建了剪辑使用拼接，并通过iFrame显示它们（也尝试嵌入视频剪辑，但遇到了同样的问题） HTML: <body> <div class="nav"> <ul> <li id="phrase

我对javascript相当陌生，正在尝试创建一个语言学习工具，它可以播放音乐视频片段并显示翻译。我使用数组来组织和访问链接和翻译。然而，我一定遗漏了一些重要的东西，因为点击短语元素来显示每个视频和翻译没有任何效果

我创建了剪辑使用拼接，并通过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>

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;
}

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));
Javascript:

<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>

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;
}

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));
这里有些小问题

首先，正如Patrick Evans在评论中指出的那样，您的函数名或函数调用中存在输入错误。一定要把这些搭配起来

其次，
click（）
是一种jQuery方法；您正在使用straight JS，因此希望使用“onclick”：

最后，
getElementById
不需要“#”符号。。你的文章中的代码中有这一点，但不是在小提琴中。只需仔细检查一下实际代码中是否存在这种情况

总之，您应该为您的单击事件侦听器获得如下内容：

document.getElementById（'phrase1'）.onclick=function（）{changePhrase3（1）}

在youtube链接中添加了
autoplay=1
，以便它们可以立即播放

将一些jQuery函数
click（）
更改为普通javascript
onclick

你不在乎翻译的旧文本是什么，只在乎容器是什么，这样你就可以更新它，对吗？这应该让你开始：

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

Gomiro gumulchyoso mulgogi jaburo.

只是一个输入错误和无效呼叫

我刚修好。请结帐

首先将函数
changePhrase3
重命名为
changePhrase
（3是打字错误）

其次，您应该像这样绑定click函数。（
#
不需要，请使用
onclick
而不是
click
）

因为如果像
document.getElementById（'phrase1'）那样绑定，单击（changephase（1））是指您将更改短语（1）的
结果发送到
单击
功能。所以你必须在函数中扭曲它

第三，像这样修改
changephase


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];
}



您的函数名是
changePhrase3
，但您试图调用
changePhrase3
并设置
changePhrase3
以在单击时执行，您只需提供名称，因为现在您正在执行它并尝试将返回设置为事件函数。你的控制台应该有错误！我一定会尝试你建议的自动播放功能——不确定它是否会使页面速度降低太多，但如果不是，这是一个好主意！它不应该拖慢任何事情。只需查看JSFIDLE链接。当你点击歌词时，它会播放视频的这一部分并显示翻译。祝你的项目好运。