Início / coding / Perguntas / 79372888
Accepted
Dennis
Asked: 2025-01-21 07:29:56 +0800 CST

status de exibição div não alterado pelo javascript

  • 772

Há pouco tempo, postei uma pergunta semelhante a esta que tinha um erro de digitação causando confusão. Peço desculpas por isso, não serviu bem a nenhum de nós e já foi deletado. Fiz o meu melhor para garantir que este código esteja limpo e sem erros de digitação. Este código também mostra o problema descrito.

Esta questão representa melhor o problema que tenho: que uma div não está sendo mostrada quando sua propriedade display está definida como 'block'. O código reduzido é o seguinte:

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>

O propósito não cumprido desta página é apresentar uma lista de itens e, quando um desses itens for clicado, um vídeo do YouTube associado será exibido no canto superior direito. Quando executo isso no depurador do Chrome, cada linha do código javascript é executada. No final, o valor embedElement.style.display é de fato definido como 'block', mas nada do embedDiv é exibido. (Eu inseri o texto bobo "Olá" apenas porque ele deveria aparecer mesmo se outras coisas fossem problemáticas.)

Novamente pergunto: qual é a coisa fundamental que estou esquecendo que faz com que essa div (aparentemente) não seja exibida?

Qual seria a abordagem correta para substituir o conteúdo de embedDiv de forma que o código necessário seja realmente executado?

javascript

1 respostas

  1. Best Answer

    Você está substituindo o div por um div vazio, então não há nada para exibir quando você altera o embedDiv.style.display.

    Livre-se da tarefa para emmedDiv.innerHTMLou coloque algum texto em resposta.

    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

relate perguntas