I have write two function in my content.js file.(chrome extension for you tube)
finding element through "tag" name (document.getElementsByTagName).
after this i used it in two function but it is not working in second function while appending child in this tag.Below you get the two function
This is not working:
function buttond(){
var i=0;
for(i=0;i<10;i++){
var ge=document.getElementsByTagName("ytd-compact-video-renderer")[i];
var node=createElement("button");
var text=createTextNode("click");
node.appendChild(text);
ge.appendChild(node);
}
}
But this is working WHY??
function butstop(){
var i=0;
for(i=0;i<10;i++){
var ge=document.getElementsByTagName("ytd-compact-video-renderer")[i];
if(ge && ge.style.display=="none"){
ge.style.display="block";
}
else if(ge){
ge.style.display="none";
}
}
}
Final work i am doing is adding play-next button given in below image link.
image
Your problem is here:
var node=createElement("button");
var text=createTextNode("click");
You need to change this to:
var node=document.createElement("button");
var text=document.createTextNode("click");
After this, it will work fine.
Edit: JSFiddle Link
Related
I have written this code by using some basics. I simply wanted to remove the image that I have created by using the function Generate() by a button. I have written the following code to remove the image generated. Please help me.
Please note that I have linked my button with the function Reset1(). Can someone give me the code to do the following please.
function Generate()
{
var image=document.createElement('img');
var div=document.getElementById('flex-box-gen');
image.src="https://thecatapi.com/api/images/get?format=src&type=gif&size=small"
div.appendChild(image);
}
function Reset1()
{
document.getElementById('Generate').remove();
}
You could either assign an id to your image element and use that to remove in your second function:
function generate() {
var image=document.createElement("img");
image.id = "image-01";
...
}
function reset() {
var image = document.getElementById("image-01");
var parent = image.parentNode;
parent.removeChild(image);
}
Or if there is nothing else in your containing div element you could just empty all elements from it:
function reset() {
document.getElementById("flex-box-gen").innerHTML = "";
}
getElementById will query a DOM element, not a javascript element.
What you can do, supposing you have only one img in your flex-box-gen is:
var imgs = document.querySelectorAll('#flex-box-gen img')
if(imgs.length > 0){
imgs[0].remove();
}
With a null-check in case the image was already removed
image.setAttribute('id',"Generate");
Add this line in generate function.
So I am creating a table through javascript,
Part of my assignment says: "the output div should only contain the table of the most recent call"
It is a class where we don't talk too much syntax and I am new to web development and javascript.
I have this function and it works:
<body>
<div id="output"></div>
<script type="text/javascript">
var functionCreate = function(strInput) {
var dividedArray = strInput.split("\n");
var dLength = dividedArray.length;
var myRow, myCell;
var myNewTable = document.createElement('table');
myNewTable.border = "1"
for(var i = 0; i< dLength; i++){
if(dividedArray[i].length >0){
myRow = myNewTable.insertRow(-1);//here
for(var j = 0; j<dividedArray[i].length;j++){
if(dividedArray[i][j] != ','){
myCell = myRow.insertCell(-1); //here
myCell.innerHTML = dividedArray[i][j]
}
}
}
}
document.getElementById("output").appendChild(myNewTable);
};
</script>
</body>
When its called one time, it does what it is supposed to do. When it is called twice, I get two tables, naturally(?)
However I have no idea how to only use the table from last call . I have no access to where it is being called. Can anyone direct me towards the right direction? What is the most basic and straight forward approach that I should take to implement this?
The reason why your code is adding new tables is due to the line of code here:
document.getElementById("output").appendChild(myNewTable);
The function appendChild appends (adds) a child (myNewTable) to the end of the element of id output.
So when u run the function multiple times, it just keeps adding a newly created myNewTable element to the output div.
To make sure it only appends the latest table, clear the output div with something like document.getElementById('output').innerHTML = ""; at the beginning of your function
I have created a button using javascript and now I want to give it a onclick. however I want the function to have a parameter i. the problem is that when I inspect the console the onclick function is just onclick=playAudio(i). I want it to be different for each value of i in the for loop, but because it is in brackets it just stays as i instead of the current number in the for loop. I hope I have explained this properly. some of the code is below to help you understand.
var i;
var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];
for(i = 0; i < audioMp3.length; i++{
var audioBtn = document.createElement("BUTTON");
audioBtn.setAttribute("onclick", "playAudio(i);";
}
var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];
for(var i = 0; i < audioMp3.length; i++){
var node = document.createElement("BUTTON");
var textnode = document.createTextNode(audioMp3[i]);
node.appendChild(textnode);
node.setAttribute("onclick", "playAudio("+i+");");
document.getElementById("element").appendChild(node);
}
function playAudio(i){
alert(i);
}
<div id="element"></div>
I'm pretty sure that this should work :
audioBtn.setAttribute("onclick", "playAudio("+i+");");
audioBtn.onclick = function(){
playAudio(i)
}
Create an array with all the possible values, loop through the values to create the buttons, each button should have their click event listener to play their own button's song.
I don't know your precise code but that is the pseudo-code to do it.
I do not have access to the HTML of the pages (they are program-built dynamically).
I do have access to the JS page it is linked to.
For example I can do somethin like this and it works:
window.onload=function(){
var output = document.getElementById('main_co');
var i=1;
var val="";
while(i<=1)
{ if(!document.getElementById('timedrpact01'+i))
{
var ele = document.createElement("div"); ele.setAttribute("id","timedrpact01"+i);
ele.setAttribute("class","inner");
ele.innerHTML=" Hi there!" ;
output.appendChild(ele);
I would like to use this basis insert a button that would allow to switch from one CSS set (there are several files invoked) to another _another path.
Many thanks
The external stylesheets are referenced using link, as in:
<link rel="stylesheet" href="http://example.com/path-to-css">
So, get hold of the appropriate link element using:
var css = document.getElementsByTagName("link")[0];
Here, we got hold of the first link available by specifying the [0] index.
Then, overwrite the href attribute to point it to the new path.
css.setAttribute("href", "http://example.com/path-to-css");
window.onload=function(){
var output = document.getElementById('main_co');
var i=1;
var val="";
//switch all the href's to another path
var switchStyleSheet = function() {
var links = document.getElementsByTagName("link");
for(var i=0; lkC = links.length; i < lkC; i++)
links[0].href = links[0].href.replace('path_to_file', '_path_to_file');
};
while(i<=1) //while is not required here, if i is 1
{
if(!document.getElementById('timedrpact01'+i)) {
var ele = document.createElement("div"); ele.setAttribute("id","timedrpact01"+i);
ele.setAttribute("class","inner");
ele.innerHTML=" Hi there!" ;
var button = document.createElement('button');
if(button.addEventListener) {
button.addEventListener('click', switchStyleSheet);
}
else {
button.attachEvent('click', switchStyleSheet);
}
output.appendChild(button);
output.appendChild(ele);
}
}
}
I am using java-query to generate a chess board on page load:
Basically I have an empty body:
<body>
</body>
I then have the following javascript linked:
var addsquareblack=function(i,row){$(document).ready(function(){
var square=$('<div class="square"></div>');
if ((i%2)===0)
{square.css('background-color','brown');}
$('.row').last().append(square);
});};
var addsquarewhite=function(i,row){$(document).ready(function(){
var square=$('<div class="square"></div>');
if ((i%2)===0)
{square.css('background-color','white');}
else
{square.css('background-color','brown');}
$('.row').last().append(square);
});};
var create=function(a){$(document).ready(function(){
var row=$('<div class="row"></div>');
$('body').append(row);
if ((a%2)===0)
{for(var i=1;i<9;i++){addsquareblack(i,row);}}
else
{for(var i=1;i<9;i++){addsquarewhite(i,row);}}
});};
var addrows=function(){
for(var i=1;i<9;i++){create(i);}
};
I then call in a script in head:
<script> addrows() </script>
However, the addsquarewhite and addsquare black are not functioning properly: My divs with class row are being added to body correctly, but then all of the squares that I am adding are getting bunched into the very last div. I thought that they would get added only to the last div available at the time of the method call. Clearly I don't understand something about scope/flow in javascript. Please enlighten.
Thanks!
Also your usage on ready handler is wrong
It is because you are adding the square elements to the last row instead of the row.
$('.row').last().append(square)
instead
var addsquareblack=function(i,row){
var square=$('<div class="square">1</div>');
if ((i%2)===0) {
square.css('background-color','brown');
}
row.append(square);
};
var addsquarewhite=function(i,row){
var square=$('<div class="square">2</div>');
if ((i%2)===0) {
square.css('background-color','white');
} else {
square.css('background-color','brown');
}
row.append(square);
};
var create=function(a){
var row=$('<div class="row"></div>');
$('body').append(row);
if ((a%2)===0) {
for(var i=1;i<9;i++){
addsquareblack(i,row);
}
} else {
for(var i=1;i<9;i++){
addsquarewhite(i,row);
}
}
};
var addrows=function(){
for(var i=1;i<9;i++){
create(i);
}
};
$(document).ready(function(){
addrows();
});
Demo: Fiddle