主页 / coding / 问题 / 79372888
Accepted
Dennis
Asked: 2025-01-21 07:29:56 +0800 CST

div 显示状态未被 javascript 改变

  • 772

不久前，我发布了一个类似的问题，但有一个拼写错误，造成了混淆。对此我深表歉意，它对我们任何人都没有好处，并且已被删除。我已尽最大努力确保此代码干净且无拼写错误。此代码也显示了所描述的问题。

这个问题更好地代表了我遇到的问题：当 div 的显示属性设置为“block”时，div 不会显示。简化的代码如下：

function selectVidId(youtubeId, tableRowNbr, tableRowId, videoWidth, videoHeight) {
  const embedElement = document.getElementById('embedDiv');
  const videoElement = document.getElementById('videoDiv');

  let response = "<div id='muteYouTubeVideoPlayer'></div> \
    <script> \
      function onYouTubeIframeAPIReady() \
        {
        var player = new YT.Player('muteYouTubeVideoPlayer', \
            { videoId : 'f5JVDUI81nk' // YouTube Video ID    \
            , width   : 480          // Player width (in px) \
            , height  : 360         // Player height (in px) \
            , playerVars: \
              { autoplay       : 0  // Auto-play the video on load       \
              , controls       : 1  // Show pause/play buttons in player \
              , showinfo       : 1  // Show the video title              \
              , modestbranding : 1  // Hide the Youtube Logo             \
              , loop           : 0  // Don't run the video in a loop     \
              , fs             : 0  // Don't hide the full screen button \
              , cc_load_policy : 0  // Hide closed captions              \
              , iv_load_policy : 3  // Hide the Video Annotations        \
              , autohide       : 0  // Hide video controls when playing  \
              } // playerVars \
            , events: {} // events \
            } \
          ) ; // new .Player \
        } // function \
      // Written by @labnol \
    </script>";

  videoElement.style.display = 'none';
  embedElement.innerHTML = response;
  embedElement.style.display = 'block';
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Livestreams</title>
  <style>
  </style>
</head>
<script src="dbg.js">
</script>
</head>

<body>
  <div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
    <div id='livestreamTable' style='width: 60%;float:left;'>
      <table border='1'>
        <thead>
          <tr>
            <th>Started</th>
            <th>Channel</th>
            <th>Songs noted</th>
            <th style='text-align:right;'>Duration</th>
            <th style='text-align:right;'>Dimensions</th>
            <th>Livestream Title</th>
          </tr>
        </thead>
        <tbody>
          <tr id='livestream_row_0'>
            <td>2021-12-04 07:15:08</td>
            <td style='text-align:left;'>Primary</td>
            <td style='text-align:right;'></td>
            <td style='text-align:right;'>1:04:54</td>
            <td style='text-align:right;' id='videoDimensions0'>1280x720*</td>
            <td><span onclick='selectVidId("f5JVDUI81nk", 0, "livestream_row_0", "1280", "720");'>Click-this-element</span></td>
          </tr>
        </tbody>
      </table>
    </div><!-- Livestream table -->
    <div id='videoDiv' style='display: none;'>
      <video id='idVideo' width="320" height="240" controls>
                <!-- <source src='replaceme.mp4' type='video/mp4'> -->
                Need top insert some video content here.
        </video>
    </div><!--videoDiv-->
    <div id='embedDiv' style='display: none;'>
      <p>Why, hello there!</p>
    </div><!-- embedDiv-->
  </div><!-- This is the "page" division (the whole page after the form) -->

</html>

此页面未实现的目的是显示项目列表，当单击其中一个项目时，右上角将显示相关的 YouTube 视频。当我通过 Chrome 调试器运行此代码时，每行 javascript 代码都会被执行。最后，embedElement.style.display 值确实设置为“block”，但 embedDiv 中没有显示任何内容。（我插入了愚蠢的“你好”文本，仅仅是因为即使其他内容有问题，它也应该出现。）

我再次问一下，我缺少了什么基本的东西导致这个 div（显然）无法显示？

以何种方式替换 embedDiv 的内容以便真正执行必要的代码的正确方法是什么？

javascript

1 个回答

  1. Best Answer

    您正在使用一个空的 div 替换该 div，因此当您更改时不会显示任何内容embedDiv.style.display。

    要么取消对 的分配emmedDiv.innerHTML，要么添加一些文本作为回应。

    function selectVidId(youtubeId, tableRowNbr, tableRowId, videoWidth, videoHeight) {
  const embedElement = document.getElementById('embedDiv');
  const videoElement = document.getElementById('videoDiv');

  let response = "<div id='muteYouTubeVideoPlayer'>This text will display</div>";

  videoElement.style.display = 'none';
  embedElement.innerHTML = response;
  embedElement.style.display = 'block';
}
    <!DOCTYPE html>
<html lang='en'>

<head>
  <title>Livestreams</title>
  <style>
  </style>
</head>
<script src="dbg.js">
</script>
</head>

<body>
  <div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
    <div id='livestreamTable' style='width: 60%;float:left;'>
      <table border='1'>
        <thead>
          <tr>
            <th>Started</th>
            <th>Channel</th>
            <th>Songs noted</th>
            <th style='text-align:right;'>Duration</th>
            <th style='text-align:right;'>Dimensions</th>
            <th>Livestream Title</th>
          </tr>
        </thead>
        <tbody>
          <tr id='livestream_row_0'>
            <td>2021-12-04 07:15:08</td>
            <td style='text-align:left;'>Primary</td>
            <td style='text-align:right;'></td>
            <td style='text-align:right;'>1:04:54</td>
            <td style='text-align:right;' id='videoDimensions0'>1280x720*</td>
            <td><span onclick='selectVidId("f5JVDUI81nk", 0, "livestream_row_0", "1280", "720");'>Click-this-element</span></td>
          </tr>
        </tbody>
      </table>
    </div><!-- Livestream table -->
    <div id='videoDiv' style='display: none;'>
      <video id='idVideo' width="320" height="240" controls>
                <!-- <source src='replaceme.mp4' type='video/mp4'> -->
                Need top insert some video content here.
        </video>
    </div><!--videoDiv-->
    <div id='embedDiv' style='display: none;'>
      <p>Why, hello there!</p>
    </div><!-- embedDiv-->
  </div><!-- This is the "page" division (the whole page after the form) -->

</html>

    • 1

相关问题