Develop Reference

How to add onclick function with javascript append?

The onclick handler function closeTab() doesn't work on appended elements.
HTML:
<li id="listid" class="first-tab">
<img class="cmd-icon" id="cmdicon" src="resources/img/cmd.png">
<a id="atext">Mozilla Firefox</a>
<img onclick="closeTab()" id="deleteTab" class="deleteicon" src="resources/img/delete-icon.svg">
<img onclick="addTab()" id="addTab" class="addplus" src="resources/img/add.svg">
</li>
JavaScript:
function closeTab() {
var whereTab = document.getElementById('listid');
if (whereTab.style.display == 'block') {
whereTab.style.display = 'none';
} else {
whereTab.style.display = "none";
}
}
function addTab() {
var img = document.createElement("img");
img.src = "resources/img/delete-icon.svg";
var img2 = document.createElement("img");
img2.src = "resources/img/cmd.png";
img.className = 'deleteicon';
img.id = "deletetab";
img.onclick = closeTab();
var ulLocation = document.getElementsByClassName('abc')[0];
var whereTab = document.getElementById('listid');
var addTab = document.createElement('li');
addTab.className = 'first-tab';
addTab.id = "listid";
addTab.className = 'active';
addTab.innerHTML = "mozilla-firefox/newtab";
addTab.appendChild(img2);
ulLocation.appendChild(addTab);
addTab.appendChild(img);
}
Why doesn't the closeTab() function work on appended items via addTab()?

Instead of img.onclick = closeTab();, you need img.onclick = closeTab;- you need to assign the function not execution.

How to return an 'onclick' Attribute?

If I remove an onclick attribute, how can I set it back on the same element with the first function that was applied on the onclick event.
For example function show(clicked_id) // gets the user id by clicking.
I dont want the user to click twice on the same id so I use a remove attribute.
Then I want to change it back the way it was.
function getthepic(m) {
GetPic.setAttribute("src", randomImages[m]);
x.appendChild(GetPic);
StorePics[i] = randomImages[m];
StoreIds[i] = x;
counter++;
i++;
CheckValve = false;
StoreIds[0].removeAttribute("onclick");
}
setTimeout(function() {
if (counter == 2) {
StoreIds[0].innerHTML = "";
StoreIds[1].innerHTML = "";
var getCard = document.createElement('img');
getCard.setAttribute("src", 'images/blank.png');
StoreIds[0].appendChild(getCard);
var getCard2 = document.createElement('img');
getCard2.setAttribute("src", 'images/blank.png');
StoreIds[1].appendChild(getCard2);
counter = 0;
i = 0;
StorePics[0] = "";
StorePics[1] = "";
StoreIds[0] = "";
StoreIds[1] = "";
StorePics.pop();
StoreIds.pop();
StorePics[0].setAttribute('onclick', show(clicked_id);
}
CheckValve = true;
}, 1000);

Using Javascript Commands After Including Into Page

I have a page with three tables (Table A, Table B, Table C), which I want to display depending on which button the user clicks. I am able to do this just fine with the following script:
var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");
var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");
btnTabA.onclick = function () {
tableA.style.display = "table";
tableB.style.display = "none";
tableC.style.display = "none"; }
btnTabB.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "table";
tableC.style.display = "none"; }
btnTabC.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "none";
tableC.style.display = "table"; }
However, I also want to include the html code for these tables into this page. I am also able to do this with the following script:
$(function(){ $("#include-tables").load("P1/1_0/table.html"); });
That said I cannot get these to work together. For example, when I combine all of this -- see sample code below -- my tables are included, but the buttons no longer work. If I check the error log in the browser, it says Null is not a object, and so I think the issue is to due with all variables and Id's being defined before the code for the button executes. That said with my (very) limited knowledge of javascript I am have not been able to figure out how to resolve this.
$(function(){
$("#include-tables").load("/1_0/tables.html");
});
var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");
var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");
btnTabA.onclick = function () {
tableA.style.display = "table";
tableB.style.display = "none";
tableC.style.display = "none";
}
btnTabB.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "table";
tableC.style.display = "none";
}
btnTabC.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "none";
tableC.style.display = "table";
}
#tableA {
}
#tableB {
display: none;
}
#tableC {
display: none;
}
<div id="include-tables"></div>
<div class="button-div">
<input type="button" id="showTableA" value="TableA">
<input type="button" id="showTableB" value="TableB">
<input type="button" id="showTableC" value="TableC">
</div>
<script src="script.js"></script>

.load() is asynchronous, so you can't access the elements until after it completes. Put all your code in its callback function.
$(function(){
$("#include-tables").load("/1_0/tables.html", function() {
var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");
var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");
btnTabA.onclick = function () {
tableA.style.display = "table";
tableB.style.display = "none";
tableC.style.display = "none";
}
btnTabB.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "table";
tableC.style.display = "none";
}
btnTabC.onclick = function () {
tableA.style.display = "none";
tableB.style.display = "none";
tableC.style.display = "table";
}
});
});
Or you could use event delegation to bind event handlers to dynamically-added elements. See Event binding on dynamically created elements?

Have a script that changes div after time interval need to alter so it only runs once

I have the following js that changes div content at a time interval, I love how it works but need to alter it so script only runs once how do I do this?
<script type="text/javascript">
function initChangeText()
{
var time = 10;
setInterval('changeText();',time*1000);
}
function changeText()
{
var divs_ = document.getElementsByTagName("div")
for (var i = 0;i<divs_.length;i++)
if (divs_[i].className == "change")
changeULText(divs_[i]);
}
function changeULText(obj)
{
var ul = obj.getElementsByTagName("ul")[0];
var li = obj.getElementsByTagName("li");
for (var i=0;i<li.length;i++)
{
if (li[i].className == "show")
{
li[i].className = "";
li[(i+1)%li.length].className = "show";
return ;
}
}
}
window.onload = initChangeText;
</script>
Thanks
Tim

You can use setTimeout instead of setInterval
function initChangeText(){
var time = 10;
setTimeout(changeText,time*1000);
}
function changeText(){
var divs_ = document.getElementsByTagName("div")
for (var i = 0;i<divs_.length;i++)
if (divs_[i].className == "change")
changeULText(divs_[i]);
}
function changeULText(obj) {
var ul = obj.getElementsByTagName("ul")[0];
var li = obj.getElementsByTagName("li");
for (var i=0;i<li.length;i++){
if (li[i].className == "show"){
li[i].className = "";
li[(i+1)%li.length].className = "show";
return ;
}
}
}
window.onload = initChangeText;
</script>

Passing a javascript value

I want to pass a numeric value through to the following Javascript function.
function swap2() {
var oldDiv = document.getElementById("product-grid");
var newDiv = document.getElementById("product-page");
oldDiv.style.display = "none";
newDiv.style.display = "block";
}
I want to be able to call the function with a number in the bracket like...
onclick="swap2(2)"
And then have the newDiv variable change based on that number like so...
var newDiv = document.getElementById("product-page2");
How can I go about doing this?

function(variable){
// process using 'variable'
}
that's how you pass a variable to a function. Thus:
function swap2(n) {
var oldDiv = document.getElementById("product-grid");
var newDiv = document.getElementById("product-page" + n);
oldDiv.style.display = "none";
newDiv.style.display = "block";
}