改变innerhtml javascript

Question

我是javascript的新手，无法找到解决此问题的最佳方法。

我有一个名为info的div。

我有几十个视频，并且不断添加新视频。

点击视频后，我想更新信息。

所以我在想我需要一个带文本的隐藏div，以及getElementsByClassName这样的东西：

<div class="video"><a href="./video1.mp4" target="videoplayer" onclick="showDescription()><div class="description"><p>description for video1</div>
<div class="video"><a href=./video2.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video2</div>
<div class="video"><a href=./video3.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video3</div>

和

function showDescription(){
var description = this.getElementsByClassName("description");
document.getElementById("info").innerHTML = description;
{

这不起作用。使用getElementsByClassName是一个很好的方法，或者任何人都可以提出另一种方式吗？

---

这是我使用的实际html：

<div id="videoplayer">
    <iframe name="VideoPlayer" width="80%" height="100%" src="http://www.youtube.com/embed/videoseries?list=PL5A2FB27789F71E63> </iframe>
</div>

<div id="info">
    <p>Welcome</p>
</div>

<div class="thumb"><p>
    <a href="http://www.youtube.com/embed/videoseries?list=PLF06E26B33B6A2F33" target="VideoPlayer"     onClick="changeInfo()"><img src="http://discolemonade.com/roku/images/thumbs/MusicVideos/MV-ThumbSmallPlaylist.jpg"></a>
    Hours of music videos, refreshed often.
    </p>
    <div class="longinfodiv">
    <p class="longinfo">this is the long version of the music video playlist info</p>
    </div>
</div>

和javascript：

function changeInfo() {
    var longinfo = document.getElementsByClassName("longinfo");
    document.getElementById("info").innerHTML = longinfo;
}

Answer 1

首先正确构建HTML文件：

<div class="video">
    <a href="./video1.mp4" target="videoplayer" onclick="showDescription()">Link</a>
    <div class="description">description for video1</div>
</div>

然后使用以下脚本：

function showDescription(){
  var video = this.parentNode;
  var desc = video.children[1];
 document.getElementById("info").innerHTML = desc.innerHTML;
}