Develop Reference

How to add a custom button to video js player

I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.
var player = videojs('my-video');
var button = player.addChild('button');
var myButton = player.controlBar.addChild('button', {
text: "Press me",
// other options
});
How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself

Text you pass in your option is available as a controlText and not a display text. ControlText creates a span in you button which is displayed when hovered. This control text is present in all the components in video js.
To add a text in videojs here is a simple way.
var player = videojs('my_video_1');
// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");
// There are many functions available for button component
// like below mentioned in this docs
// https://docs.videojs.com/button.
// You can set attributes and clasess as well.
// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element
// you can add click events
// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";
myButtonDom.onclick = function(){
alert("Redirecting");
window.location.href = "https://www.google.com"
}
Instead of setting an inner html you can play around and add any html DOM attribute since at the end it is only a button.
Adding Codepen link for code demonstration
https://codepen.io/vaibhav281128/pen/NWawWjr
In case if you want to register your button as a custom component
https://codepen.io/vaibhav281128/pen/bGoYGPR

My solution in case you also want to control the position of your button:
addButtonToPlayer() {
let myButton = player.controlBar.addChild('button');
myButton.controlText('tooltip text');
player.controlBar
.el()
.insertBefore(
myButton.el(),
player.controlBar.getChild('fullscreenToggle').el()
);
let buttonDom = myButton.el();
buttonDom.innerHTML = '⬇'; // button text/emoji
buttonDom.onclick = function() {
alert('Hey');
};
}

How to make a button click a button on a different page

I have a button on one html page, but when clicked I want it to activate a different button on a different html page. Is this possible?

This is only possible if the first page actually generates the second page (via window.open()). Otherwise, you won't have any way to access the document in the other window.
Here's an example:
var newWin = window.open("other page in my domain");
var otherButton = newWin.document.querySelector("selector to find button");
otherButton.click();

This solution will work though, but it requires passing a value from one page to another. It cannot link pages together. If you want that look into websockets.
Page 1
HTML
<button id="activate">Activate other page</button>
JavaScript
document.querySelector("#activate").addEventListener("click", function(){
location.href = "page2.html?button=activate"; //mind the querystring here.
});
Page 2
HTML
<button id="toactivate" disabled>disabled button</button>
JavaScript
var activateButton = location.search.slice(1); //querystring | get rid of the ?
activateButton.split(/&/);
activateButton.forEach(function(value){
var splitted = value.split("=");
if (splitted[0] == "button" && splitted[1] == "activate")
{
document.querySelector("#toactivate").removeAttribute("disabled");
}
});

How to make a button's onclick function in one webpage execute a function in another webpage without php

In my main html page, I have the following code:
<p class="text" id="time">00:00</p>
In my other html page, I have the following code:
<button onclick="resettime()">RESET TIME</button>
They both link to the same javascript page, which has the code:
function timeIncrement()
{
document.getElementById('time').innerHTML = +mins+":"+secs;
if(secs==60)
{
mins+=1;
secs = 0;
}
}
var timecheck = setInterval(timeIncrement,1000);
function resettime()
{
clearInterval(timecheck);
mins = 0;
secs = 0;
timecheck = setInterval(timeIncrement,1000);
}
Clicking the button doesn't reset the time to 0:0, so it doesn't work, so I was wondering if there's any way I can do this without going into php. I'm new to html/js, so sorry if this is a repeat, couldn't find a similar one.

Two html means two windows. if you want to execute script from one window to another window, you should have the other window's object and both window should have document.domain. for having reference of another window
in main html add the following 
<script>window.open("other.html");//other html will open automatically</script>
in other html, change the code to following
<button onclick="resettimeinMainHtml()">RESET TIME</button>
<script>function resettimeinMainHtml(){window.opener.resettime();// will reset in mail html}</script>

Place cursor at the end of text in an iframe body element with JavaScript

I'll start by apologising as this may seem like or actually be a duplicate, but I've tried every solution I've encountered and none seem to be working for me.
In my HTML I have an iframe referencing another HTML document. With JavaScript, at the press of a list of buttons I insert text into the body of that iframe. I also use JavaScript to maintain focus on the iframe body. The problem is that nothing appears to work for me to get the cursor to move to the end of the text each time I press those buttons, it always moves to the beginning.
One of the solutions I've tried was to add this code to the function that handles my button presses:
iFrameBody.focus();
var content = iFrameBody.innerHTML;
iFrameBody.innerHTML = content;
so the function looks like this:
function typeIn(buttonId) {
var iFrameBody = document.getElementById("iFrame").contentWindow.document.body;
iFrameBody.innerHTML += buttonId;
iFrameBody.focus();
var content = iFrameBody.innerHTML;
iFrameBody.innerHTML = content;
}
Something else I tried was, in the HTML file referenced by my iframe I did:
<body onfocus="this.innerHTML = this.innerHTML;"></body>
I tried several other more complicated solutions that frankly I didn't even quite understand to be honest, all to no avail. Any help would be much appreciated.

I figured it out. The issue was that I was using a body element, writing to it's innerHTML and trying to set focus on the body. By simply using a textarea inside my iFrame instead it became very simple and it only required the simplest code.
This to set focus when the page loads:
window.onload = function () {
var iFrameTextArea = document.getElementById("iFrame").contentWindow.document.getElementById("iFrameTextArea");
iFrameTextArea.focus();
}
And then this to set the button to write to the textarea while maintaining focus:
function typeIn(buttonId) {
var iFrameTextArea = document.getElementById("iFrame").contentWindow.document.getElementById("iFrameInput");
iFrameTextArea.focus();
iFrameTextArea.value += buttonId;
}
Super easy!!

Instead of again using textarea in iframe, u can also solve this by using the following code.
var iframeElement = document.getElementById("iFrame").contentWindow.document.body;
iframeElement.focus();
var len = iframeElement.length ;
iframeElement.setSelectionRange(len, len);

array resetting itself javascript

i am just beginning javascript so i decided to make a program that accepts values from the user on a button click and stores them in an array of object and on click of another button show writes them to the innerHTML of a paragraph
<!DOCTYPE HTML>
<html>
<head>
<script>
var records = new Array();
var counter = 0;
var t = document.getElementById("show");
function record(name,age,cla)
{
this.name=name;
this.age=age;
this.cla=cla;
}
function add()
{
var r1 = new record(frm1.name.value,frm1.age.value,frm1.clas.value);
alert(r1.name);
records.push(r1);
alert(records[0].name);
}
function show()
{alert(records.length);
for(var i=counter;i<records.length;i++,counter++)
{
t.innerHTML+= records[i].name+" "+records[i].age+" "+records[i].cla+"<br>";
}
}
function clear()
{
t.innerHTML="";
counter=0;
}
</script>
</head>
<body>
<form id = "frm1" >
name : <input type = text id = "name">
age : <input type = text id = "age">
class : <input type = text id = "clas">
<button onclick= "add()">add</button>
<button onclick = "show()">show</button>
<button onclick = "clear()">clear</button>
</form><br>
<p id = "show"></p>
</body>
</html>
so after debugging it i found out that the element is added properly but whenever i call the show method the records.length shows 0 .. why is the array resetting itself ?

Three issues:
1) Your form is trying to submit when you click on one of your buttons and thus is causing the page to reload. When the page is reloaded, everything is reinitialized and thus the array is empty.
You can fix that by calling preventDefault() to prevent the default behavior of the button click.
2) You are calling document.getElementById("show") before the page has been parsed so it will always be null.
You will need to put that script element at the end of the page after the DOM has been loaded. You can actually put all your scripts at the end of the document.
3) Your clear() method name interferes with a predefined global symbol of the same name so you should change it to a different function name. This is one of the reasons why you generally want to avoid globally scoped symbols.
Here's a working demo: http://jsfiddle.net/jfriend00/ZvbS6/
Note: If you are using plain javascript, then you will have to deal with some browser differences. Older versions of IE don't support e.preventDefault(). See this prior answer for details.