I'm trying to create a browser extension popup (in JS) that creates a number of buttons with links that open up different webpages. The function takes a number of parameters, the main one being b_link which is an array of URL's to the website. For some reason, only the last URL in array is applied to all of the buttons that are created.
I'm not entirely sure what the problem is, I could speculate but I don't think that would be productive. One thing I did notice and had to compensate for was using b_link in the lambda function. Just using b_link[i], the lambda function only saw undefined so no webpage opened, but using var tmpLink = b_link[i]; at least gets the link into the function and allows a webpage to open.
How should I make these buttons so that they all have their own links, rather than only the last one in the array?
The function in question:
function createSiteButton(numBtns, b_id, b_class, b_text, b_link, b_bg)
{
// check if the input text is an array
if (Array.isArray(b_text))
{
// create the new set of buttons
for (i= 0; i < numBtns; i++)
{
var newButton = document.createElement('button');
var tmpLink = b_link[i];
newButton.id = b_id;
newButton.class = b_class;
newButton.innerHTML = b_text[i];
newButton.style.background = b_bg;
newButton.addEventListener("click", function()
{
if (tmpLink)
{
window.open(tmpLink, "_blank");
}
});
button_array[i] = newButton;
}
// add the new buttons the screen
for (i= 0; i < numBtns; i++)
{
divID.appendChild(button_array[i]);
}
}
}
I found a way to do this via creating an a element, setting href via a.href = tmpLink and appending the button to the a element as a child. The final function is:
function createSiteButton(numBtns, b_id, b_class, b_text, b_link, b_bg)
{
var outputElem = document.getElementById('output');
// check if the input text is an array
if (Array.isArray(b_text))
{
//var tmpLink = null;
// create the new set of buttons
for (i= 0; i < numBtns; i++)
{
var a = document.createElement('a');
var newButton = document.createElement('button');
var tmpLink = b_link[i];
newButton.id = b_id;
newButton.class = b_class;
newButton.innerHTML = b_text[i];
newButton.style.background = b_bg;
a.href = tmpLink;
a.appendChild(newButton);
divID.appendChild(a);
button_array[i] = newButton;
}
}
}
Related
So I`m trying to make a Memory Game. At the moment I´m trying to set the Image of the card randomly but my code just changes to top Image.
var images = ["url(IMG1.jpg)","url(IMG2.jpg)"...];
var randomIMG =0;
var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2'onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:images[randomIMG];background-repeat:no-repeat;background-size:contain;'></button></div></div></div>"
for (let i = 0; i < level; i++) {
document.querySelector("#container").innerHTML +=card;
}
function RandomBG(){
for (let i = 0; i<level;i++){
randomIMG = Math.floor(Math.random()*9)+0;
document.getElementById("button2").style.backgroundImage = images[randomIMG];
}
}
function Flipfront(el){
RandomBG();
el.closest('.flip-card').classList.add('flipped');
flipped++;
}
And Also for later on, how do I put all my Buttons into an array?
In this line
document.getElementById("button2").style.backgroundImage = images[randomIMG];
you are setting the background of button2. You need to ensure that you get the correct element:
function RandomBG(el){
for (let i = 0; i<level;i++){
randomIMG = Math.floor(Math.random()*9)+0;
el.style.backgroundImage = images[randomIMG];
}
}
and that you pass it:
function Flipfront(el){
RandomBG();
el.closest('.flip-card').classList.add('flipped');
flipped++;
}
If all you are trying to do is get all the buttons in the page:
let btns = document.querySelectorAll("button");
And if you want a few specific ones, change the css selector.
I'm trying to change styles of many text fields on a layout of an application in RSA Archer GRC using custom object. I wrote a script and it runs only once, when the application is opened. The problem is that the layout contains multiple tabs. When tab is changed the script isn't working anymore.
So how to execute the script on every tab changing?
var tableId = 'master_DefaultContent_rts_ts3295_s4655_f18821srvgrid_ctl00';
//table with target elements
$(document).ready(function () { //run script when page is loaded
main();
});
function main() {
var table = document.getElementById(tableId).getElementsByTagName("tbody")[0];
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < (rows.length - 1); i++) {
var field = rows[i].getElementsByTagName("td")[1];
var spanElements = field.getElementsByTagName("span"); //target elements
for (var k = 0; k < spanElements.length; k++) { //apply style for each of them
var elem = spanElements[k];
elem.style.fontFamily = "Times New Roman";
elem.style.fontSize = "14pt";
elem.style.color = "black";
}
}
}
Try using this in your custom object instead of $(document).ready({});, it should fire each time a tab is loaded.
function pageLoad(){
//code
}
<tabelement onclick="main()">Tab</tabelement>
Use the onclick event on the tab to execute the main function.
I have successfully created a button which adds text to the webpage however I do not know a viable way to remove text once this has been created. The js code I have is:
var addButtons = document.querySelectorAll('.add button');
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text)
weekParent.appendChild(item);
}
function removeText() {
//document.getElementbyId(-).removeChild(-);
}
for (i = 0; i < addButtons.length; i++) {
var self = addButtons[i];
self.addEventListener("click", addText);
}
I have viewed various sources of help online including from this site however I simply cannot get any to work correctly. Thank you in advance.
Sure, it should be easy to locate the added <p> tag relative to the remove button that gets clicked.
function removeText() {
var weekParent = this.parentNode.parentNode;
var item = weekParent.querySelector("p");
weekParent.removeChild(item);
}
If there is more than 1 <p> tag inside the weekParent you will need a more specific querySelector.
I tried this code to hide a tab:
hideTab: function() {
var dashboard_obj = Ext.ComponentQuery.query('sellax-navigation-panel');
var tabBarObj = dashboard_obj[0].down('tabpanel').getTabBar();
var tabsArray = tabBarObj.items;
for(var tabBarObjItems = 0; tabBarObjItems < tabsArray.length; tabBarObjItems++)
{
var tabObj = tabsArray.get(tabBarObjItems);
if(tabObj.card.id == "tabSettings")
{
var tabObj_list = Ext.ComponentQuery.query('sellax-navigation-sub[id=settingsSubNav]');
var tabBarObj_list = tabObj_list[0].getTabBar();
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
if(tabsArray_list_item.id == "tab-1334")
{
tabsArray_list_item.hide();
}
But the console values are not correct, so how can I hide that tab?
My code:
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
var tabsArray_list_item = tabsArray_list.get(tabSubBarObjItems);
if (tabsArray_list_item.hasOwnProperty('itemId'))
{
value = tabsArray_list_item['itemId'];
if (value == 'tabdeptsList')
{
tabsArray_list_item.hide();
}
}
Code throws no error but tab is not hiding.
How to get ItemId of this panel and hide this tab?
Find Component in Container
To retrieve the component for a specific itemId you should use the getComponent method of the Ext.container.Container. It accepts an itemId as it's parameter and returns the matching component.
From the Sencha ExtJs 6.2.1 documentation:
Examines this container's items property and gets a direct child component of this container.
So you do not need too loop over the items, just call the function.
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
Hide Tab
To hide the associated tab, you can use the tab property of the component.
var tab = tabsArray_list.tab; // Each component has a reference to it's tab
tab.hide();
Full Code
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
var tab = tabsArray_list.tab;
tab.hide();
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);
}
}
}