We Keep Coding

onclick event with object as parameter in quotes

Working with the Google maps and places API, I am rendering infowindows for each marker that gets generated by a function generateInfoWindow(location).
In there I create a string HTML that will be passed to the Google maps markers content attribute.
Function
function generateInfoWindow(location) {
var html = "<div class = 'infowindowContainer'>" +
"<span class = 'infoWindowHeader'>" + location.name + "</span>" +
"<div class = 'row'>" +
"<span class = 'col-xs-12'> ... : " + getInfoWindowDetails(location).adress + "</span>" +
"<span class = 'col-xs-12'> ... : " + getInfoWindowDetails(location).open_hours + "</span>";
if (location.offers.length > 0) {
html +=
"<span class = 'col-xs-12 iwOffers'> ... </span>" +
"</div>" + //ends row
"<div class = 'infoWindowCircleContainer'>";
for (var i = 0; i < location.offers.length; i++) {
html += "<span class = 'infoWindowCircle'>" + location.offers[i].offer_text + "</span>";
}
html += "</div>" //CircleContainer
}
html += "<span class = 'showMore' onclick = 'processWin(" + location + ")'>Show more</span>";
html += "</div>"; //InfoWindowContainer the parent to all
return html;
}
function processWin(location) {
var winMarker;
var winnerMap;
var mapOptions = {
zoom: 15,
center: location.geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: googleMapsStyles
};
var locationId = location.place_id;
var request = {
placeId: locationId
};
places.getDetails(request, getWinnerDetails); //Where getWinnerDetails is the callback
//since the location that we are passing in the callback function is the one we get as a JSON from the detailed search we are going to have to use our modified vars associated with the location here such as .keyword
$("#foodType").text("Typ av mat : " + location.keyword);
winnerMap = new google.maps.Map(document.getElementById('displayWinnerMap'), mapOptions);
for (var i = 0; i < markers.length; i++) {
if (markers[i].placeId == location.place_id) {
winMarker = markers[i];
break;
}
}
//setOfferCircles(location);
winMarker.setMap(winnerMap);
$("#displayWinPage").css("display", "block");
doScroll("#displayWinPage");
}
Where I append the span with the class showMore I wish to append an onclick event that will call a method processWin(location) where I pass the location variable. (Will be multiple markers).
I can't seem to be able to pass the object location in the onclick event and
I don't understand why. Please do enlighten me.

An object converted to a string becomes [object object] and that is what you are passing as the parameter and not the object itself. Here is example code showing the wrong output
var location = {x : 100, y : 100};
var html = "<span class = 'showMore' onclick = 'processWin(" + location + ")'>Show more</span>";
console.log(html);
Output: <span class = 'showMore' onclick = 'processWin([object Object])'>Show more</span>
Using JSON.stringify(location) you get the object output correctly as shown below.
var location = {x : 100, y : 100};
var html = "<span class = 'showMore' onclick = 'processWin(" + JSON.stringify(location) + ")'>Show more</span>";
console.log(html);
Output:<span class = 'showMore' onclick = 'processWin({"x":100,"y":100})'>Show more</span>

Javascript Onclick Function not working when Toggling Temperature

I'm working on a weather api and I'm having trouble toggling between Celsius and Fahrenheit.
I used a separate function to get the location as well as call from the API.
I also added an onclick function within this second function. I can get it to toggle to one temperature but not back.
function getTemp(data) {
// API variables
var temp1 = data.main.temp;
var weatherUrl = data.weather[0].icon;
var tempInC = Math.round(temp1); // Temp in Celsius
var tempInF = Math.round(temp1 * 9/5 +32)
// Inner HTML variables
var weatherF = "The weather is " + tempInF + " ℉ <br>" +
"<img src='" + weatherUrl + "'/>";
var weatherC = "The weather is " + tempInC + " ℃ <br>" +
"<img src='" + weatherUrl + "'/>";
// Button DOM variables
var buttonText = document.getElementsByTagName("button")[0].innerText;
var buttonId = document.getElementById('btn');
x.innerHTML = weatherF;
buttonId.onclick = function toggleTemp() {
if(buttonText == "Convert to Celsius") {
x.innerHTML = weatherC;
buttonId.innerText = "Convert to Fahrenheit";
} else {
x.innerHTML = weatherF;
buttonId.innerText = "Convert to Celsius";
}
}
}
I used innerText because I thought it was the easiest way to toggle back and forth between temp. I can get the weather to convert to Celsius, but the else statement is not working. Fyi, I was not able to get the button text to change using the tag name which is why I resorted to using an id in the button click function. I'm still pretty new at Javascript. Any help would be appreciated.

You need to update the buttonText variable when you toggle the text of buttonId.
buttonId.onclick = function toggleTemp() {
if (buttonText == "Convert to Celsius") {
x.innerHTML = weatherC;
buttonText = buttonId.innerText = "Convert to Fahrenheit";
} else {
x.innerHTML = weatherF;
buttonText = buttonId.innerText = "Convert to Celsius";
}
}

Your variable x is undefined. In the future, try to avoid using the innerHTML property, which can break event listeners and be slow to render.
Neither buttonText nor x are defined in the scope of your onclick function, which might be why nothing happens. Have you checked the console for errors?
function getTemp(data) {
// API variables
var temp1 = data.main.temp;
var weatherUrl = data.weather[0].icon;
var tempInC = Math.round(temp1); // Temp in Celsius
var tempInF = Math.round(temp1 * 9/5 +32)
// Inner HTML variables
var weatherF = "The weather is " + tempInF + " ℉ <br>" +
"<img src='" + weatherUrl + "'/>";
var weatherC = "The weather is " + tempInC + " ℃ <br>" +
"<img src='" + weatherUrl + "'/>";
// Button DOM variables
var x = ...; // Declare x for the function scope here
var buttonText = document.getElementsByTagName("button")[0].innerText;
var buttonId = document.getElementById('btn');
x.innerHTML = weatherF;
buttonId.onclick = (function (x, wC, wF, btn) {
return function () {
// Change DOM
if(btn.innerText == "Convert to Celsius") {
x.innerHTML = wC;
btn.innerText = "Convert to Fahrenheit";
} else {
x.innerHTML = wF;
btn.innerText = "Convert to Celsius";
}
};
})(x, weatherC, weatherF, document.getElementsByTagName("button")[0])
}

Simulating click event inside JavaScript OnClick results in error

I am building a context menu with some options using <li> tags as shown below. I need to simulate click event on another ID (image), When i choose and click on this option from context menu.. I can only have the function instantaneous execution inside onclick as shown in below code-
Edited the code to give more clarity
var functionMain = function ContextMenu$functionMain(items, targetId) {
$(menu).html(buildItems(items, targetId));
};
var buildItems = function ContextMenu$buildItems(items, targetId) {
var i, result;
result = '';
for (i = 0; i < items.length; ++i) {
var reportId = targetId.substring(targetId.indexOf(':') + 1);
var reportIdFormed = $('#' + reportId + 'run' + runReportLinkName);
result += '<li> Run HTML </li>';
}
return result;
};
Above code is resulting in Uncaught SyntaxError: Unexpected identifier
Resultant HTML --> Run HTML
How to get rid of this issue?

Use a delegated event
var reportId = targetId.substring(targetId.indexOf(':') + 1);
var reportIdFormed = $('#' + reportId + 'run' + runReportLinkName);
result += '<li> Run HTML </li>';//add a class
$('body').on('click','.delegated-event',function(){ //delegate the event based on that class
reportIdFormed.trigger('click');
})
if the selector changes for each element then you need a attribute to store the selector:
var reportIdFormed = '#' + reportId + 'run' + runReportLinkName;//make it a string
result += '<li> Run HTML </li>';//add a class
$('body').on('click','.delegated-event',function(){ //delegate the event based on that class
reportIdFormed = $($(this).attr('data-selector'));//get the selector
reportIdFormed.trigger('click');
})

The problem with your code is that you are trying to pass and object referent instead and ID string, so you are printing that, so JS cannot print and JS object, so it will print the reference [object Object] so you should do it like so:
var reportId = targetId.substring(targetId.indexOf(':') + 1); //e.g. rpt1234
var reportIdFormed = '#' + reportId + 'run' + runReportLinkName; //e.g. rpt1234runHTML
result += '<li> Run HTML </li>';
Your code JS
function handleTrigger(id) {
var target = $(id);
if (target.length) {
target.trigger("click")
}
}

Try this
var reportId = targetId.substring(targetId.indexOf(':') + 1); //e.g. rpt1234
var reportIdFormed = reportId + 'run' + runReportLinkName; //e.g. rpt1234runHTML
result += '<li> Run HTML </li>';

Download of excel file is not working in Firefox but works in Chrome

I am trying to download an excel file on onclick event. It allow me to download excel file in chrome but not in Firefox. Not sure what is the issue. I am getting below error.
ReferenceError: event is not defined
Below is my javascript function
function hyperlinkFn(){
var htmlTbl="";
var htmlTbl1="";
var string = event.target.parentElement.name;
var tempString=[];
var temp= new Array();
for(var i=0;i<string.length;i++){
if(string[i]=="|"){
temp.push(tempString);
tempString=[];
}else{
tempString+=string[i];
}
}
userStoryModalRelease = temp[0];
userStoryModalPID = temp[1];
userStoryModalPrjName = encodeURIComponent(temp[2]);
userStoryModalTeam = encodeURIComponent(temp[3]);
userStoryAltId=encodeURIComponent(temp[4]);
userStoryModalStatus = temp[5];
userStoryModalTeam = userStoryModalTeam.replace(", ", ",");
var uri="getUserStoryDetails.htm?release=" + userStoryModalRelease + "&projectId=" + userStoryModalPID + "&projectName=" + userStoryModalPrjName +
"&team=" + userStoryModalTeam + "&alternateId=" + userStoryAltId + "&view=" + storyView;
var encode = encodeURI(uri);
window.location = encode;
}
HTML code where I am calling this function in the datatable
{
title : "Total Points",
data : function(data, type, row, meta) {
return data.totalSum+'<a name="'+ data.releaseNum +'|'+ data.projectId +'|'+ data.projectName +'|'+ data.team + '|'+ data.altId + '|total|'+'" onclick="hyperlinkFn()">'
+ '<i class="fa fa-file-excel-o font-size-15 " title="Click here to export details " aria-hidden="true"></i></a>';
},
className : "center storypoint yellow_fill pos-rel"
} ],

Change your click binding like below so that event will work:
$(document).on('click', '.classname', function(event){
var htmlTbl="";
var htmlTbl1="";
var string = event.target.parentElement.name;
var tempString=[];
var temp= new Array();
for(var i=0;i<string.length;i++){
if(string[i]=="|"){
temp.push(tempString);
tempString=[];
}else{
tempString+=string[i];
}
}
userStoryModalRelease = temp[0];
userStoryModalPID = temp[1];
userStoryModalPrjName = encodeURIComponent(temp[2]);
userStoryModalTeam = encodeURIComponent(temp[3]);
userStoryAltId=encodeURIComponent(temp[4]);
userStoryModalStatus = temp[5];
userStoryModalTeam = userStoryModalTeam.replace(", ", ",");
var uri="getUserStoryDetails.htm?release=" + userStoryModalRelease + "&projectId=" + userStoryModalPID + "&projectName=" + userStoryModalPrjName +
"&team=" + userStoryModalTeam + "&alternateId=" + userStoryAltId + "&view=" + storyView;
var encode = encodeURI(uri);
window.location = encode;
})
Note: remove onclick event from hyperlink and add class on hyperlink and replace that classname with .classname

Looks like this has already been covered here:
ReferenceError: event is not defined error in Firefox
WebKit follows IE's old behavior of using a global symbol for "event", but
Firefox doesn't. When you're using jQuery, that library normalizes the
behavior and ensures that your event handlers are passed the event
parameter.
function hyperlinkFn(){ needs to become function hyperlinkFn( event ){

Javascript attach new property to element

I have an object, X, and some code that creates a div and assigns id = X.ID. After the html is created, I assign the object to the div, like this:
document.getElementById(X.ID).XValue = X;
If I set a break after that statement, I can evaulate document.getElementById(X.ID).XValue and see all the properties of X.
While I was creating the html, I added onmouseup="MOUSE_UP(event)".
var aProp = {};
aProp.ThisValue = "This";
aProp.ThatValue = "That";
aProp.Id = 5;
var html = '<div id="' + aProp.Id + '"';
var func = 'MOUSE_UP';
html += ' onmouseup="' + func + '(event) ">';
html += '</div>';
document.getElementById("test").innerHTML += html;
document.getElementById(aProp.Id).XVALUE = aProp;
function MOUSE_UP(event) {
alert(event.currentTarget.XValue.ThisValue);
}
Now, when I set a break at MOUSE_UP, event.currentTarget is my div (event.currentTarget.id == X.ID), but event.currentTarget.XValue is undefined.
Why is XValue undefined here when it was defined earlier?

Looks like setting innerHTML of #test would wipe out all custom properties from its children. You can check this in the jsFiddle. When you'll run the fiddle as it is, you'll notice NewProp of #1 will become undefined after adding more content with test.innerHTML += ... If you log tabIndex instead of NewProp, you'll get the correct values.
This happens because += operator is just a shortcut for a statement like a = a + b, which can also be written a += b.
Basicly you create a string from the inner HTML of #test, then add another string to it, and finally replace the original innerHTML of #test with this new string. All previous elements in #test are replaced with new ones, which don't have the custom properties set.
When setting id property for an element, also id attribute is added to the HTML, hence they are a part of innerHTML of #test, and are added to the newly created HTML too.
If you use proper DOM manipulation instead of setting innerHTML, you'll get the results you want. The code below uses createElement() and appendChild() methods instead of setting innerHTML.
function myMouseUp(e) {
alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);
}
function buildOneDiv(aProp) {
var html = document.createElement('div');
aProp.ThisValue = 'This is ' + aProp.id;
aProp.ThatValue = 'That is ' + aProp.id;
html.id = aProp.id;
html.addEventListener('mouseup', myMouseUp, false);
html.innerHTML = 'Test ' + aProp.id;
return html;
}
function buildDivs(x) {
var html = buildOneDiv(x);
document.getElementById("test").appendChild(html);
document.getElementById(x.id).NewProp = x;
}
window.onload = function () {
var aProp, i;
for (i = 1; i < 4; i++) {
aProp = {};
aProp.id = i;
buildDivs(aProp);
}
};
A live demo at jsFiddle.

This is not so much an answer as it is a clarification and a work-around.
Given this html
<div id="test"></div>
and this code
function myMouseUp(e) {
alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);
}
function buildOneDiv(aProp) {
aProp.ThisValue = "This";
aProp.ThatValue = "That";
var html = '<div id="' + aProp.id + '"';
var func = 'myMouseUp';
html += ' onmouseup="' + func + '(event) ">';
html += 'Test ' + aProp.id + '</div>';
return html;
}
function buildDivs(x) {
var html = buildOneDiv(x);
document.getElementById("test").innerHTML += html;
document.getElementById( x.id ).NewProp = x;
}
window.onload = function () {
for (var i = 1; i < 4; i++) {
var aProp = {};
aProp.id = i;
buildDivs(aProp);
}
};
The end result is that only the LAST div whose onmouseup is defined will have a legitimate value for NewProp at myMouseUp. For each other div, this property is undefined. This is why I got some comments indicating that "It does work." It works for ONE, which is all I had in my example. (This is the clarification.)
My workaround is to add a global object to be an associative array and change two statements:
var myDivs = {}; // global
Replace
document.getElementById( x.id ).NewProp = x;
in buildDivs with
myDivs[x.id] = x;
and replace
alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);
in myMouseUp with
alert(myDivs[e.currentTarget.id].ThisValue );.
I'd still like to know why the original approach doesn't work.