We Keep Coding

Make function delete

I recently tried to make a page that saves the input and displays it on the page. Everything works but i want to add a delete button at every input, which deletes only one input. I tried so many different ways, but none of them worked. If you have any idea how to solve this, I would be grateful.
Here is the code:
let savedinput = []
Localstoragesaves = localStorage.getItem("Zaznamki")
const Predpomnjenipodatki = JSON.parse(Localstoragesaves)
const DeleteButtonHTML = document.getElementById("izbrisi-gumb")
const userinput = document.getElementById("vnos-pr")
const inputsavebutton = document.getElementById("vnos-gumb")
const LabelHTML = document.getElementById("seznamzaznamkov")
const SaveTab = document.getElementById("zavihek-gumb")
const DeleteLast = document.getElementById("pocisti-zadnjo")
if (Localstoragesaves) {
savedinput = Predpomnjenipodatki
Render(savedinput)
}
DeleteLast.addEventListener('click', function(){
savedinput.pop()
Render(savedinput)
})
SaveTab.addEventListener('click',
function(){
browser.tabs.query({active: true, currentWindow: true}, function(tabs){
savedinput.push(tabs[0].url)
localStorage.setItem("Zaznamki", JSON.stringify(savedinput))
Render(savedinput)
console.log( localStorage.getItem("Zaznamki") )
})
})
function Render(parameter) {
let tabslabel = ""
for (i = 0; i < parameter.length; i++) {
tabslabel += `
<li>
<a href='${parameter[i]}' target='_blank'>${parameter[i]}</a>
</li>
`
}
LabelHTML.innerHTML = tabslabel
}
DeleteButtonHTML.addEventListener('dblclick',
function() {
localStorage.clear()
savedinput = []
LabelHTML.textContent = ''
})
inputsavebutton.addEventListener("click", function(){
const Vsebinavnosa = userinput.value
savedinput.push(Vsebinavnosa)
localStorage.setItem("Zaznamki", JSON.stringify(savedinput))
Render(savedinput)
userinput.value = ""
console.log( localStorage.getItem("Zaznamki") )
})

I solved this problem myself. I'm quite proud 😁. I want to thank you for your really quick responses even if I didnt get the solution here.
If someone has the same problem I had, I will tell you what I did.
In function render, I added a button with onclick function with argument, so that this new function which will be called will know which item from array needs to remove:
<button id="${parameter[i]}" onclick="Delete(${i})">Delete</button>
and then somewhere in this document I added this function which gets value from button click and knows which item from the array savedinput and localstorage needs to remove:
function Delete(parameter) {
mojizaznamki.splice(parameter, 1)
console.log(savedinput)
localStorage.setItem("Zaznamki", JSON.stringify(savedinput))
Render(savedinput)
}
Hope this helps others.
Greetings from Slovenia

How do I execute code after page is loaded? [duplicate]

This question already has answers here:
How to make JavaScript execute after page load?
(25 answers)
Closed 4 years ago.
How do I make the following code load once the page is loaded?
I tried making it an entire new function but it didn't work, can someone help me
document.getElementById("ano").addEventListener("change", function(a) {
const tbody = document.getElementById('tbody_calendario_jogos')
while (tbody.firstChild) {
console.log(tbody.firstChild)
tbody.removeChild(tbody.firstChild)
}
for (key in jogos) {
const anoSelect = new RegExp(`${a.target.value}`)
const data = anoSelect.exec(jogos[key].Data)
if (data != null) {
const obj = jogos[key]
const tr = document.createElement('tr')
const tdTemporada = document.createElement('td')
tdTemporada.textContent = obj.Temporada
const tdLocal = document.createElement('td')
tdLocal.textContent = obj.Local
const tdMais = document.createElement('td')
tdMais.textContent = obj.Mais
tr.appendChild(tdTemporada)
tr.appendChild(tdLocal)
tr.appendChild(tdMais)
tbody.appendChild(tr)
}
}
})

You can use a simple init statement to execute the code after the page loads:
function init() {
//your code here
}
window.onload = init;

Just move your function outside the event listener and change it to a name function so you can reference the function name and load the function on page load as well as when the change listener is invoked by your #ano element like this:
function someFunc(a) {
const tbody = document.getElementById('tbody_calendario_jogos')
while (tbody.firstChild) {
console.log(tbody.firstChild)
tbody.removeChild(tbody.firstChild)
}
for (key in jogos) {
const anoSelect = new RegExp(`${a.target.value}`)
const data = anoSelect.exec(jogos[key].Data)
if (data != null) {
const obj = jogos[key]
const tr = document.createElement('tr')
const tdTemporada = document.createElement('td')
tdTemporada.textContent = obj.Temporada
const tdLocal = document.createElement('td')
tdLocal.textContent = obj.Local
const tdMais = document.createElement('td')
tdMais.textContent = obj.Mais
tr.appendChild(tdTemporada)
tr.appendChild(tdLocal)
tr.appendChild(tdMais)
tbody.appendChild(tr)
}
}
}
someFunc(); // will load on page load
document.getElementById("ano").addEventListener("change", someFunc); // will load when `ano` element invokes the change listener
Check and run the following Code Snippet for a practical example of the above approach:
function someFunc() {
alert("function loaded!!")
}
someFunc(); // will load on page load
document.getElementById("ano").addEventListener("click", someFunc); // will load when `ano` element invokes the change listener
<button id="ano">Click Me</button>

Try putting it in self-revoking function instead of change function. Whatever you define inside of the change function will NEVER be called when the page loads. Depending on where and when you want the code to be called, placing it in the appropriate location of the page such as inside of the <head></head> tag, right after opening <body> tag, or at the end of the closing </body> tag.
(function () { // Your code })();

Javascript Dynamically invoke shortcut keys combination function to shortcutjs plugin

Am getting key Combination from the server. Based on that am assigning key Combination to function dynamically. The below code is working for last iteration in loop. how below code is work for all iterations.
In my page i have two buttons save and cancel the below code is working for last iteration in for loop, It means btnCanel button triggers if i press key for save function.Any suggestions. hope understand my question.
$(document).ready(function fn() {
var keyCombination = new Object();
keyCombination['btnAdd'] = "Alt+S";
keyCombination['btnCancel'] = "Alt+C";
for (var k in keyCombination) {
if (keyCombination.hasOwnProperty(k)) {
shortcut.add(String(keyCombination[k]), function () {
var btnAdd = document.getElementById(String(k));
btnAdd.focus();
btnAdd.click();
});
}
}
});
if i give like this means it is working
shortcut.add("Alt+S", function () {
var btnAdd = document.getElementById('btnAdd ');
btnAdd .focus();
btnAdd .click();
});
shortcut.add("Alt+C", function () {
var btnCancel = document.getElementById('btnCancel');
btnCancel.focus();
btnCancel.click();
});
but if i try to add dynamically its overriding help me this issue.
Thanks in Advance.

I created a separate function outside the document.ready function like this now its working fine.
$(document).ready(function fn() {
var keyCombination = new Object();
keyCombination['btnAdd'] = "Alt+S";
keyCombination['btnCancel'] = "Alt+C";
for (var k in keyCombination) {
if (keyCombination.hasOwnProperty(k)) {
Set_KeyCombinations(k, keyCombination);
}
}
});
function Set_KeyCombinations(k, keyCombination) {
shortcut.add(String(keyCombination[k]), function () {
var eleId = document.getElementById(String(k));
if (eleId) {
if ($('#' + String(k).trim()).css('display') !== 'none' && eleId.getAttribute("disabled") !== "disabled") {
eleId.click();
eleId.focus();
}
}
});
}

Try this:
var keyCombinations = [ "Ctrl+Shift+X" , "Ctrl+Shift+Y" ];
for(var i=0; i<keyCombinations.length; i++){
(function(shorcutCombination){
shortcut.add(shorcutCombination,function() {
alert("i am " + shorcutCombination);
});
})(keyCombinations[i]);
}
The idea is that you need to preserve the value of keyCombinations[i]
as i increases in the loop. Tested this here: Openjs

How to avoid stop script error in browsers

I have a page of more than 2500 anchor tag to process. Now in IE it is throwing the stop script error. Is it possible to do as a batch? Taking 500 executing it and then take the another 500 executing it??
This is the code...
ajaxLinks : function(el, flag) {
var links = $(el).find('a');
var notLinkAr=["a[href^=javascript]","#toolbarId ul li>a","#tool_settings .link a",".page-action-links li>a","#tool_settings .label a",".success-map .success-tabs li>a",".success-map .sm_loggedin li>a", ".analyst_cat li>a",".modal",".layer",".newpage",".close",".hideFromPopup",".pagenum",".next",".prev",".delete_src",".tips","#hidr","#backr"];
$(notLinkAr).each(function(index){
var notLinkI=$(notLinkAr[index]);
if($(notLinkI).is("a")){
if($(notLinkI).length>0){
$(notLinkI).each(function(index1){
$(notLinkI[index1]).addClass("dontAjaxify");
});
}
}
});
$(links).each(function(i, obj){
var link = $(obj);
if(!$(obj).hasClass('dontAjaxify')){
link.attr('rel', link.attr('href'));
var rellnk = link.attr('rel');
if(flag=='ajaxified') {
if(/http/.test(rellnk)){
var relurl;
relurl=rellnk.replace((window.location.protocol + "//"+ window.location.hostname),'')
link.attr('rel', relurl);;
}
}
link.bind('click', function(e){}
Iam adding a class for all the anchor tag(which is 2500) in a page.

jQuery's .slice may help you.
http://api.jquery.com/slice/
var count = 0;
var ajaxify = function (el, flags) {
var links = $(el).find('a').slice(count, count + 500);
count = count + 500;
// Do the processing here
if (links.length) {
// Call it next time only if some data is returned in the current call
setTimeout("ajaxify()", 5000);
}
}
The above code is not tested, but should probably work.

Internet Explorer throwing error on getElementById

I'm having trouble with some javascript which uses getElementById. It works fine in FF, Safari and Chrome, but IE(8 - haven't tried others) bails out.
The relevant bit of html is a div called topnav:
<div id="topnav">
... some HTML ...
<div>
<div id="sub_1" class="lowernav">
... some HTML ...
</div>
<div id="sub_2" class="lowernav">
... some HTML ...
</div>
In my javascript, I want to find topnav. The full code (up to where it bails) is this:
<script>
window.onload = init();
function init() {
// Show current menu
showCurrentMenu();
}
function showCurrentMenu() {
hideMenus(); // Hide all menus and then show the current one
topnav = document.getElementById('topnav');
... rest of code ...
}
function hideMenus() {
var divlist = document.getElementsByTagName('div');
for(var ii=0; ii<divlist.length; ii++) {
if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) {
divlist[ii].className += ' hidden';
}
}
}
... then some other code it hasn't reached yet...
Am I doing something wrong here? It may well be something really obvious, but for the life of me, I can't see it! All advice is much appreciated.
ETA: Ok, here's the whole code, as it currently stands:
<script>
window.onload = init;
function init() {
// Show current menu
showCurrentMenu;
// Attach 'onmouseover' event to main menu items
topnav = document.getElementById('topnav');
// Get all items in list
var menulist = topnav.getElementsByTagName('a');
for(var ii=0; ii<menulist.length; ii++) {
menulist[ii].onmouseover = showMenu;
}
document.getElementById('mainHomeNav').onmouseout = restoreMenu;
}
function restoreMenu(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (targ.id == "mainHomeNav") {
showCurrentMenu;
}
}
function hideMenus() {
var divlist = document.getElementsByTagName('div');
for(var ii=0; ii<divlist.length; ii++) {
if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) {
divlist[ii].className += ' hidden';
}
}
}
function showCurrentMenu() {
hideMenus;
topnav = document.getElementById('topnav');
// Get all items in list
var menulist = topnav.getElementsByTagName('a');
for(var ii=0; ii<menulist.length; ii++) {
if(menulist[ii].className != menulist[ii].className.replace('thisSection','')) {
var thisid = menulist[ii].id;
var thissubmenu = document.getElementById(thisid + '_sub');
thissubmenu.className = thissubmenu.className.replace(/hidden/g,'');
}
}
}
function showMenu() {
hideMenus;
// show this menu
var submenu_id = this.id + '_sub';
var submenu = document.getElementById(submenu_id);
submenu.className = submenu.className.replace(/hidden/g,'');
}
</script>

The problem is
window.onload = init();
This will call the init function immediately, and then use its return value as the page's onload function. You need:
window.onload = init;
which will call the init function only after the page has fully loaded.

I found the problem - I didn't have 'var' in front of 'topmenu'.
So instead of
topnav = document.getElementById('topnav');
it should have been
var topnav = document.getElementById('topnav');
Thanks everyone for the help.

Your problem lies in the following line:
window.onload = init(); // this will CALL init() and assign the return value
Since init doesn't return anything, window.onload will be undefined.
Now the reason for it not working in IE, but in other Browsers is that those other Browsers might already have parsed a part of the DOM and therefore the call to showCurrentMenu works.
But that could just as well break, since from a technical point of view the document is not guaranteed to be loaded, to fix that you have to assign the actual function reference to window.onload by doing:
window.onload = init;