A short time ago, I posted a question similar to this which had a typo causing confusion. I apologize for that, it did not serve any of us well, and has since been deleted. I have done my best to ensure that this code is clean and typo-free. This code also shows the described problem.
This question better represents the problem that I have: that a div is not being shown when its display property is set to 'block'. The reduced code is as follows:
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>The unfulfilled purpose of this page, is to present a list of items, and when one of those items is clicked, an associated YouTube video will be displayed in the top right. When I run this through the Chrome debugger, each line of the javascript code is executed. At the end, embedElement.style.display value is indeed set to 'block' but nothing from the embedDiv shows. (I inserted the silly "Why hello there" text solely because it should appear even if other things are problematic.)
Again I ask, what fundamental thing am I missing that causes this div to (apparently) not display?
What would be the correct approach to replacing the content of embedDiv in such a way that the necessary code actually is executed?
You're replacing the div with an empty div, so there's nothing to display when you change embedDiv.style.display.
Either get rid of the assignment to emmedDiv.innerHTML, or put some text in response.
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>