Develop Reference

lottie-player is not working in bootstrap 5 application

When i try to use lottie-player it is showing the below error
Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
line this._io.observe(this.container)), this.container - is null
<div id="animation-container" class$lit$="lit$880547042$" lang="en" aria-label$lit$="lit$880547042$" role="img"> <div id="animation" class$lit$="lit$880547042$" style$lit$="background:lit$880547042$;"> <!--?lit$880547042$-->main </div> <!--?lit$880547042$-->Lottie animation </div>
Note: class name was changed class$lit$
var a = '<lottie-player src="'+imgJson+'" background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay></lottie-player>'
$('.empto').append(a);
imgJson - dynamically path will be appended

document.querySelector() does not working

Is there any dependency problem?
because I am using the only pure javascript there is no jquery or anything.
Using node.js
Here is my code
window.onload()=function(){
var left=document.querySelector('.left');
var right=document.querySelector(".right");
var container=document.querySelector(".container");
console.log(left);
left.addEventListener('mouseenter',()=>{
container.classList.add('hover-left');
})
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
})
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
})
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
})
}
<div class="container">
<div class="split left">
<h1>The Designer</h1>
Read more
</div>
<div class="split right">
<h1>The Programmer</h1>
Read more
</div>
</div>

I got this error on Chrome:
Uncaught TypeError: window.onload is not a function
Removing the parentheses the error was gone.
But i didn't get how your page should work.
Look for more information here:
https://stackoverflow.com/questions/29927638/window-onload-work-but-chrome-console-says-uncaught-typeerror-window-onload-is

If you select your DOM Elements with the CSS-Selector '.' for classes you get a list of elements instead of a single element which you can directly manipulate.
If left, right and container only appear once on your page, it's best to use ids:
JS:
window.onload=function(){
var left=document.getElementById('left');
var right=document.getElementById("right");
var container=document.getElementById("container");
console.log(left);
left.addEventListener('mouseenter',()=>{
container.classList.add('hover-left');
})
left.addEventListener('mouseleave', () => {
container.classList.remove('hover-left');
})
right.addEventListener('mouseenter', () => {
container.classList.add('hover-right');
})
right.addEventListener('mouseleave', () => {
container.classList.remove('hover-right');
})
}
HTML:
<div id="container" class="container">
<div class="split" id="left">
<h1>The Designer</h1>
Read more
</div>
<div class="split" id="right">
<h1>The Programmer</h1>
Read more
</div>
</div>
Also as a comment above points out you mustn't use brackets when setting onload event.

If you have any static JS files being loaded in the tag in your html requesting to please load the JS at the end of the html body. Document wont be ready until the JS is loaded hence the document will be null.

How do I debug in chrome to get value of an observable in knockout?

I am working on a video player app and It has multiple play buttons and each time I hit a play button loggerVideoURL takes in a url I want to find the value of loggerVideoURL.
How do I debug to find the value of loggerVideoURL at each instance of hitting the play button.
Here's my code
HTML
<div class="loggerVideoControlsWrapper p0" id="video-controls-wrapper" style="">
<!-- Video -->
<div class="video-js-responsive-container vjs-hd" id="video-container">
<video crossorigin="anonymous" id="logger-media-player" preload="auto" data-bind="attr:{src:loggerVideoURL},event:{timeupdate:onPlayerTimeUpdate,play:playerOnPlay,pause:playerOnPause,seeked:playerOnSeeked,seeking:playerOnSeeking,loadedmetadata:playerOnLoadedmetadata,error:playerOnError}" class="video-js vjs-default-skin" width="auto" height="auto">
#*controls="true" - for now *#
#*<source data-bind="attr:{src:loggerVideoURL}" type="video/mp4" />*#
#*<track label="English" srclang="en" kind="captions" data-bind="attr:{src:captionsFileUrl}" />*#
</video>
<div data-bind="if: playerSeeking() || !playerLoadedMetadataFired() || playerErrorMsg()">
<div id="seeking-overlay">
<div class="snippet-demo" data-bind="if: !playerErrorMsg()" style="position: relative; top: 50%; transform: translateY(-50%);">
<div class="snippet-demo-container demo-spinner demo-spinner__spinner-default">
<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active is-upgraded" data-upgraded=",MaterialSpinner"><div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div></div>
</div>
</div>
<!-- ko if: playerErrorMsg() -->
<div data-bind="" class="alert alert-danger alert-dismissable" style="width: 75%;margin: auto auto;position: relative; top: 50%; transform: translateY(-50%);">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="fa fa-times-circle"></i> Error</h4> <span data-bind="text:playerErrorMsg" style="font-weight: normal"></span>
</div>
<!-- /ko -->
</div>
</div>
</div>
JavaScript
function ClsLoggerVideo(parent) {
var self = this;
var timer;
var timerInterval = 800;
var FrameRate = TimecodeMath.FrameRate;
function log(msg) { console.log(msg); }
$(document).on('mouseup', function () { clearInterval(timer); });
self.isIe = vmsWebUtils.isIE();
self.parentLogger = ko.observable(parent);
self.captionFiles = ko.observableArray();
self.loggerVideoURL = ko.observable();
//self.captionsFileUrl = ko.observable('http://ny-venturae-7.viacom_corp.ad.viacom.com/video/APOCALYPSE_NOW_1080p2398_CLIP.vtt');
self.captionFiles.push();
self.techAttributes = ko.observable(null);
self.frameRate = ko.computed(function () { return self.techAttributes() == null ? null : self.techAttributes().frameRate; });
self.isDropFrame = ko.computed(function () {
return self.techAttributes() == null ? null : self.techAttributes().isDropFrame;
});
self.startTcInFrames = ko.computed(function () {
return self.techAttributes() == null ? null : self.techAttributes().startTcInFrames;
});

I'm not sure on whether you're asking how to debug in Chrome, or how to get the value in Knockout, so I'll throw out some info and hope it answers your question.
Debugging in Chrome:
Open the developer tools (More Tools > Developer Tools).
Go to the Sources tab.
In the left window pane open the folder that contains your Javascript files (may be called "js" for example, but will depend on your folder naming structure in your web app).
Click on the .js file that contains your Knockout viewmodel definition. In this case that would be the one that contains the function ClsLoggerVideo.
Then find where you want to set a breakpoint in the .js file and simply click on the line number.
When you run the function again it will break at that spot and you can hover over values or add watches by highlighting right clicking a variable. In this case loggerVideoURL.
Keep in mind with Knockout, you need to make the watch like this: self.loggerVideoURL()
You need to include the parentheses to get the underlying value of the observable. If you don't include them the you'll just see the KO observable function definition.
As far as your code is concerned I'm seeing multiple issues. First, I don't see where you handle the Play button press. You could do this any number of ways in Javascript, but since you're using KO I'd suggest using a click event binding like this:
<button type="button" data-bind="click: playButtonClicked">Play</button>
Then in your viewmodel function ClsLoggerVideo, put this:
self.playButtonClicked = function () {
//Put some code here to land a breakpoint on so you can see the value of loggerVideoURL()
}
I hope that helps.

The Knockout Context Debugger chrome extension is extremely helpful. You can open dev tools as usual, but there is a new subtab for inspecting bound elements and the backing viewmodel. This approach doesn't require any breakpoints.

Uncaught TypeError: $(...).sidr is not a function[Console Chrome developer tool]

I put this code into add basic module HTML block of a wordpress page builder. I encounter the white screen of death. Chrome developer console told me the following:
helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is not a function
This can be traced from line 15 in helpers.js?ver=4.5.3:
$('#mobile-menu-trigger').sidr({
source: sourceVal,
name: 'sidr-main'
});
Before or after I restored the previous version of the page, there was no such error. The html code below seems to run normally if save as a html file and open it with chrome. Can someone please explain which might have possibly caused that error?
Edit: When I change the theme of wordpress, everything works again. With all of other themes, the code works so the problem should come from the theme.
$(document).ready(function() {
getUpdates();
});
function getUpdates() {
// get the data with a webservice call
$.getJSON('http://api.thingspeak.com/channels/136053/feed/last.json?callback=?', function(data) {
// if the field1 has data update the page
if (data.field1) {
document.querySelector('.info-giver .temperature').innerHTML = data.field1.slice(0,4) + "°C";
document.querySelector(".info-giver .humidity").innerHTML = data.field2.slice(0,5) + "%";
document.querySelector('.info-giver .windspeed').innerHTML = data.field4.slice(0,4) +" m/s";
document.querySelector(".info-giver .pressure").innerHTML = data.field3 +"Pa" ;
}
});
}
(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "announcer">
<div class="temperatureDeclared" style= "width: 25.00%">Temperature</div>
<div class="humidityDeclared" style= "width: 25.00%">Humidity</div>
<div class="windspeedDeclared" style= "width: 25.00%">Windspeed</div>
<div class="pressureDeclared" style= "width: 25.00%">Pressure</div>
</div>
<div class = "info-giver">
<div class="temperature" style= "width: 25.00%">N/a</div>
<div class="humidity" style= "width: 25.00%">N/a</div>
<div class="windspeed" style= "width: 25.00%">N/a</div>
<div class="pressure" style= "width: 25.00%">N/a</div>
</div>

Add these lines before and after code your code will works
;(function($){
//code
})(jQuery);
Just Like This
;(function($){
$('#mobile-menu-trigger').sidr({
source: sourceVal,
name: 'sidr-main'
});
})(jQuery);
I hope this will works !

You didn't include your sidr library. After loading jquery include sidr library. After that init sidr like this on your html.
$('#mobile-menu-trigger').sidr({....});

Javascript: Uncaught TypeError: Cannot set property 'innerHTML' of null(5)

Where's the error, I am basically trying to get the grid display W or B, but it just keep displaying error, which is a typeError:cannot set property 'innerHTML' of null. I've been trying to debug it since yesterday night. I am very new to HTML.
<script>
function play(id)
{
//var first = document.getElementById("current_turn").innerHTML;
//document.getElementById(id).innerHTML = first;
//if (first=="B")
//{
// document.getElementById("current_turn").innerHTML="W";
//}
//else
//{
// document.getElementById("current_turn").innerHTML="B";
//}
var currentTurn = document.getElementById("current_turn").innerHTML;
document.getElementById(id).innerHTML = currentTurn;
if (document.getElementById(id) == "X")
{
document.getElementById("current_turn").innerHTML="O";
}
else
{
document.getElementById("current_turn").innerHTML="X";
}
}
</script>
</head>
<body>
<h1 style="font-family:Arial">Gomoku</h1>
<h3 style="font-family:Arial">Introduction</h3>
<div class="board">
<div class="row">
<div id="0-0" onclick="play(0, 0);"></div>
<div id="1-0" onclick="play(1, 0);"></div>
<div id="2-0" onclick="play(2, 0);"></div>
<div id="3-0" onclick="play(3, 0);"></div>
<div id="4-0" onclick="play(4, 0);"></div>
<div id="5-0" onclick="play(5, 0);"></div>
<div id="6-0" onclick="play(6, 0);"></div>
<div id="7-0" onclick="play(7, 0);"></div>
<div id="8-0" onclick="play(8, 0);"></div>
<div id="9-0" onclick="play(9, 0);"></div>
<div id="10-0" onclick="play(10, 0);"></div>
<div id="11-0" onclick="play(11, 0);"></div>
<div id="12-0" onclick="play(12, 0);"></div>
<div id="13-0" onclick="play(13, 0);"></div>
<div id="14-0" onclick="play(14, 0);"></div>
</div>
</div>
<div class="text">
Current Turn: <div id="current_turn">X</div><br />
<br />
</div>
</body>

Your play function takes two arguments of which you only use the first one in the function body assuming that it conforms with the format of the element ids.
So you should change your function to
Function play ( x, y ){
var id = x+"-"+y;
//...
}
There are some more issues about your code wrt maintainability and best practices:
use type-safe comparisons ( ===, !== instead of ==, != )
separate html definition from event handler assignment.
The free jquery JS lib provides support to achieve this and helps
With numerous other features, in particular cross-browser code normalisations.

you need to change either function play(id) or onclick call as both arguments are not matching and hence it is throwing null for innerHTML property because not getting element with id specified at line
document.getElementById(id).innerHTML = currentTurn;
change function as below :
function play(id1, id2)
{
var id = id1+"-"+id2;
// then write your if else part
}
or change onclick like below :
onclick="play('0-3');"

You shoudn't put the script before the Current Turn: <div id="current_turn">X</div><br />.
You will get nothing because you have the current_turn be defined.