We Keep Coding

URL deformed when inserted in HTML

Correct URL printed in console:
https://maps.googleapis.com/maps/api/staticmap?center=37.387138,-122.083237&zoom=15&size=200x200&key=API_KEY
I get the following when I insert it into html
https://maps.googleapis.com/maps/api/staticmap?center=37.386337,-122.085823%E2%80%A65&size=200x200&maptype=roadmap&key=API_KEY
What could be causing this problem? I do encode the URL so I'm not sure what's the issue here.
JavaScript function:
function genStaticMap(mapObj, elemID, width, height, mapType){
var center = mapObj.lat + "," + mapObj.lng; // define map center
var zoom = mapObj.radius; // get radius (zoom) of map
var altTag = mapObj.title; // get alt tag for map
var mapURL = "https://maps.googleapis.com/maps/api/staticmap?center="
+ center + "&zoom=" + zoom + "&maptype=" + mapType
+ "&size=" + width + "x" + height
+ "&key=" + API_KEY;
console.log(mapURL);
var mapURL = encodeURI(mapURL);
var staticMap = "<img src=\"" + mapURL + "\" alt=\"" + altTag + "\" />";
$(staticMap).appendTo(elemID); // append map to element
}

var mapURL = encodeURI(mapURL); is the likely culprit. Can you either remove that line, or move console.log() immediately following, to check?

Constructed string for style value not working

function tickleTux() {
var tuxImg = document.getElementById('tux');
tuxImg.style.transition = "transform .5s";
tuxImg.addEventListener('click', itTickles, false);
function itTickles() {
var addRotation = 10;
var rotationValue = '"' + 'rotate' + '(' + addRotation + 'deg' + ')' + '"'
tuxImg.style.transform = rotationValue;
console.log(rotationValue);
}
Basically, this adds a rotation style to an img and makes it rotate.
I just want to know why adding the value to the transform property in this way doesn't work. Why?
The console.log command prints out: "rotate(10deg)"
So what's stopping it from functioning? Some kind of rule?
Thanks for your help.

The value shouldn't contain " around it.
var rotationValue = 'rotate(' + addRotation + 'deg)';

how to change the text of node in Go.js

I am using go.js to making the graphs. Everything is ok, but now I want to edit the text like the color. For this i have made a textarea. And I have done this, but the issue is when i change the text for one node it changes the text for the other nodes I have selected previously. Don't know where I am wrong. Here is my code:
var info = document.getElementById("myInfo");
myDiagram.addDiagramListener("ChangedSelection", function(e1) {
var sel = e1.diagram.selection;
var str = "";
if (sel.count === 0) {
str = "Selecting nodes in the main Diagram will display information here.";
info.innerHTML = str;
return;
} else if (sel.count > 1) {
str = sel.count + " objects selected.";
info.innerHTML = str;
return;
}
// One object selected, display some information
var elem = sel.first();
var shape = elem.findObject("SHAPE");
var txtblock = elem.findObject("TEXT");
str += "<h3>Selected Node:</h3>";
str += "<p>Figure: " + shape.figure + "</p>";
str += "<p>Text: <textarea style='height:100px;' id='nodetext'> " + txtblock.text + "</textarea></p>";
var strokeColor = shape.stroke;
str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
info.innerHTML = str;
$(document).on('keyup','#nodetext',function(a)
{
a.preventDefault();
txtblock.text=$(this).val() ;
})
// Initialize color picker
$("#custom").spectrum({
color: strokeColor,
// Change colors by constructing a gradient
change: function(color) {
var c = color.toRgb();
var r, g, b;
var grad1 = new go.Brush(go.Brush.Linear);
r = Math.min(c.r + 10, 255);
g = Math.min(c.g + 10, 255);
b = Math.min(c.b + 10, 255);
grad1.addColorStop(0, "rgb(" + r + "," + g + "," + b + ")");
grad1.addColorStop(0.5, color.toRgbString());
r = Math.max(c.r - 30, 0);
g = Math.max(c.g - 30, 0);
b = Math.max(c.b - 30, 0);
grad1.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")");
shape.fill = grad1;
shape.stroke = "rgb(" + r + "," + g + "," + b + ")";
txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
}
});
});

To be clear, your question is about modifying the colors of a Shape and a TextBlock, not trying to modify the TextBlock.text property.
The problem is that you are adding a "change" event handler for the Spectrum object each time the Diagram.selection collection changes. That event handler is a closure that holds a reference to the particular selected Node. As the selection changes you add a new event handler, but the old ones are still there and being called, modifying the previously selected nodes.
There are several possible solutions. I suggest that you define Spectrum's change event handler only once, not in the "ChangedSelection" DiagramEvent listener. Set it to be a function that operates on all of the selected Nodes in the Diagram, not on a particular Node. Or perhaps change the colors if there is only one Node that is selected, it that is the policy that you want.
By the way, unless your Links are not selectable, your code ought to handle the case when the user selects a Link.

JavaScript is not printing my HTML

I have this function:
function suggestSell() {
var sellValue = document.getElementById('sellValue');
var btcVol = document.getElementById('btcVol');
var grossSell = btcVol * sellValue ;
var sellFee = grossSell * .006;
var sellOff = grossSell - sellFee;
document.write('<p>sellValue: ' + sellValue.innerHTML +
'<br> btcVol: ' + btcVol.innerHTML +
'<br> grossSell: ' + grossSell +
'<br> sellFee: ' + sellFee +
'<br> sellOff: ' + sellOff +
'<br></p>');
}
that i call like this:
<script>suggestSell();</script>
But it displays this in the browser.
1156.161.42053359undefinedundefinedundefined

var sellValue = document.getElementById('sellValue');
selects the node. You probably need the value
var sellValue = document.getElementById('sellValue').value;
Same thing for btcVol
var btcVol = document.getElementById('btcVol').value;
If you do make this change, note that sellValue.innerHTML and btcVol.innerHTML should be changed appropriately.

What is the optimal way to load form data into a string and then to localStorage?

Is this the optimal way to load form data into a string and then to localStorage ?
I came up with this on my own, and I am not good in programming. It works, for what I need, but I am not sure if it's a bulletproof code?
<script>
var sg = document.getElementById("selectedGateway");
var sd = document.getElementById("selectedDestination");
var dm = document.getElementById("departureMonth");
var dd = document.getElementById("departureDay");
var dy = document.getElementById("departureYear");
var rm = document.getElementById("returnMonth");
var rd = document.getElementById("returnDay");
var ry = document.getElementById("returnYear");
var ad = document.getElementById("adults");
var ch = document.getElementById("option2");
$("#searchRequestForm").submit(function() {
var string = 'From: ' + sg.value + ' \nTo: ' + sd.value + ' \nDeparture: ' + dm.value + '/' + dd.value + '/' + dy.value + ' \nReturn: ' + rm.value + '/' + rd.value + '/' + ry.value + ' \nNumber of adults: ' + ad.value + ' \nNumber of children: ' + ch.value;
localStorage.setItem("string", string);
});
</script>

I would use something like the following so that I could deal with an object and its properties rather than a big string. Note that other than the jQuery selectors, this is pure JavaScript.
Demo: http://jsfiddle.net/grTWc/1/
var data = {
sg: $("#selectedGateway").val(),
sd: $("#selectedDestination").val()
// items here
};
localStorage.setItem("mykey", JSON.stringify(data));
To retrieve the data:
var data = JSON.parse(localStorage["mykey"]);
alert(data.sg);
See Also:
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify
http://api.jquery.com/jQuery.parseJSON/

I prefer a table driven approach so there is no repeated code (DRY):
var ids = [
"selectedGateway", "From: ",
"selectedDestination", "\nTo :",
"departureMonth", "\nDeparture: ",
"departureDay", "/",
"departureYear", "/",
"returnMonth", " \nReturn: ",
"returnDay", "/",
"returnYear", "/",
"adults", " \nNumber of adults: ",
"option2", " \nNumber of children: "];
var submitStr = "";
for (var i = 0; i < ids.length; i+=2) {
submitStr += ids[i+1] + document.getElementById(ids[i]).value;
}
localStorage.setItem("string", submitStr);

You could define a function such as the one below to directly get the values by id so then it would be simpler when you build your string.
function form(id) {
return document.getElementById(id).value;
}