Javascript can't set colour - javascript

The function is called via:
myChart.gChangeBarColour(1, "#000000");
This works:
// Changes bars colour
this.gChangeBarColour = function(gBarID, gBarColour) {
if (gBarID <= this.gData.length && gBarID >= 0) {
document.getElementById("gBar" + gBarID).style.backgroundColor = '#000000';
}
}
But this doesn't work:
// Changes bars colour
this.gChangeBarColour = function(gBarID, gBarColour) {
if (gBarID <= this.gData.length && gBarID >= 0) {
document.getElementById("gBar" + gBarID).style.backgroundColor = '" + gBarColour + "';
}
}
No errors in the console at all! Any ideas?

Your '" + gBarColour + "' is a string , delimited by single quotes ' that contains " + gBarColour + ", that value is then used as the color.
You need to leave out all the quotes and plus signs:
// assign the value of gBarColour to the backgroundColor property
document.getElementById("gBar" + gBarID).style.backgroundColor = gBarColour;

'" + gBarColour + "'
should be
gBarColour or ''+gBarColour

Related

Cannot read property 'replace' of undefined in if statment

I am updating a variable with a splice of an existing array inside of an if statement which should then run my loop only on the updated array, however I keep getting a cannot read property 'replace' of undefined on my values array. I am only getting this error because I have to input the value plus one array index as I need the upper of the two value ranges. (values[i + 1].replace(',', ''). Any ideas why the + 1 is causing the replace to see values as undefined? Thanks in advance for any help possible!
dropDown = function (arg) {
if ($('select[name="est_property_value"]').length != 0) {
var values = ["0", "60,000", "85,000", "90,000", "95,000", "100,000", "105,000", "110,000", "115,000", "120,000", "125,000", "130,000", "135,000", "140,000", "145,000", "150,000", "155,000", "160,000", "165,000", "170,000", "175,000", "180,000", "185,000", "190,000", "195,000", "200,000", "210,000", "220,000", "230,000", "240,000", "250,000", "260,000", "270,000", "280,000", "290,000", "300,000", "310,000", "320,000", "330,000", "340,000", "350,000", "360,000", "370,000", "380,000", "390,000", "400,000", "420,000", "440,000", "460,000", "480,000", "500,000", "520,000", "540,000", "560,000", "580,000", "600,000", "620,000", "640,000", "660,000", "680,000", "700,000", "720,000", "740,000", "760,000", "780,000", "800,000", "820,000", "840,000", "860,000", "880,000", "900,000", "920,000", "940,000", "960,000", "980,000", "1,000,000", "1,500,000"],
anchor = $('select[name="est_property_value"]').val();
// default arg loads larger ltv on page load
if (arg === 'default') {
values = values.splice(0, 18);
}
console.log(values);
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + values[i + 1].replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + values[i + 1] + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}
}
return;
}
As you mentioned in question, i + 1 make that problem. because it does not exists in your array. You can use a condition in for loop so when the next element exists, Use that. And when You get to the last element of array, use 0 for example.
Change your for loop to this
for (var i = 0; i < values.length; i++) {
valueToInt = values[i].replace(',', '');
if (valueToInt < parseInt(anchor)) {
curValue = '<option value="' + (values[i + 1] ? values[i + 1] : '0').replace(',', '') + 1 + '">' + '$' + values[i] + ' - $' + (values[i + 1] ? values[i + 1] : '0') + '</option>';
$('select[name="mortgage_amount"]').append(curValue);
}
}

How to split innherHTML string using Javascript into specific parts after a certain character like a '+' sign

I need to break a string apart after certain characters.
document.getElementById("result").innerHTML = Monster + "<p id='vault" + loop + "'> || HP: " + HP + "</p>" + " || Defense: " + Def + " || Attack: " + ATK + " || Can it Dodge/Block: " + DB + " || Can it retaliate: " + RET + " || Initative: " + INT + " || Exp: " + MEXP + " <input type='submit' class='new' onclick='Combat(" + loop + ")' value='FIGHT!'></input>" + "<br><br>" + A;
function Chest(id){
window.open('LootGen.html', '_blank');
}
function Combat(id){
document.getElementById("C").value = document.getElementById("vault" + id).innerHTML;
}
When this runs the value that results is:
|+HP:+20
However I only want '20' part,now keep in mind that this variable does change and so I need to use substrings to somehow pull that second number after the +. I've seen this done with:
var parameters = location.search.substring(1).split("&");
This doesn't work here for some reason as first of all the var is an innher html.
Could someone please point me in the write direction as I'm not very good at reading docs.
var text = "|+HP:+20";
// Break string into an array of strings and grab last element
var results = text.split('+').pop();
References:
split()
pop()
using a combination of substring and lastIndexOf will allow you to get the substring from the last spot of the occurrence of the "+".
Note the + 1 moves the index to exclude the "+" character. To include it you would need to remove the + 1
function Combat(id){
var vaultInner = document.getElementById("vault" + id).innerHTML;
document.getElementById("C").value = vaultInner.substring(vaultInner.lastIndexOf("+") + 1);
}
the code example using the split would give you an array of stuff separated by the plus
function Combat(id){
//splits into an array
var vaultInner = document.getElementById("vault" + id).innerHTML.split("+");
//returns last element
document.getElementById("C").value = vaultInner[vaultInner.length -1];
}

How to setup if-statement with multiple conditions, which uses the valid condition's variable in the if-statement?

Okay, that title will sound a bit crazy. I have an object, which I build from a bunch of inputs (from the user). I set them according to their value received, but sometimes they are not set at all, which makes them null. What I really want to do, it make an item generator for WoW. The items can have multiple attributes, which all look the same to the user. Here is my example:
+3 Agility
+5 Stamina
+10 Dodge
In theory, that should just grab my object's property name and key value, then output it in the same fashion. However, how do I setup that if-statement?
Here is what my current if-statement MADNESS looks like:
if(property == "agility") {
text = "+" + text + " Agility";
}
if(property == "stamina") {
text = "+" + text + " Stamina";
}
if(property == "dodge") {
text = "+" + text + " Dodge";
}
You get that point right? In WoW there are A TON of attributes, so it would suck that I would have to create an if-statement for each, because there are simply too many. It's basically repeating itself, but still using the property name all the way. Here is what my JSFiddle looks like: http://jsfiddle.net/pm2328hx/ so you can play with it yourself. Thanks!
EDIT: Oh by the way, what I want to do is something like this:
if(property == "agility" || property == "stamina" || ....) {
text = "+" + text + " " + THE_ABOVE_VARIABLE_WHICH_IS_TRUE;
}
Which is hacky as well. I definitely don't want that.
if(['agility','stamina','dodge'].indexOf(property) !== -1){
text = "+" + text + " " + property;
}
If you need the first letter capitalized :
if(['agility','stamina','dodge'].indexOf(property) !== -1){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
UPDATE per comment:
If you already have an array of all the attributes somewhere, use that instead
var myatts = [
'agility',
'stamina',
'dodge'
];
if(myatts.indexOf(property) !== -1){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
UPDATE per next comment:
If you already have an object with the attributes as keys, you can use Object.keys(), but be sure to also employ hasOwnProperty
var item = {};
item.attribute = {
agility:100,
stamina:200,
dodge:300
};
var property = "agility";
var text = "";
if(Object.keys(item.attribute).indexOf(property) !== -1){
if(item.attribute.hasOwnProperty(property)){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
}
Fiddle: http://jsfiddle.net/trex005/rk9j10bx/
UPDATE to answer intended question instead of asked question
How do I expand the following object into following string? Note: the attributes are dynamic.
Object:
var item = {};
item.attribute = {
agility:100,
stamina:200,
dodge:300
};
String:
+ 100 Agility + 200 Stamina + 300 Dodge
Answer:
var text = "";
for(var property in item.attribute){
if(item.attribute.hasOwnProperty(property)){
if(text.length > 0) text += " ";
text += "+ " + item.attribute[property] + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
}
It's unclear how you're getting these values an storing them internally - but assuming you store them in a hash table:
properties = { stamina: 10,
agility: 45,
...
}
Then you could display it something like this:
var text = '';
for (var key in properties) {
// use hasOwnProperty to filter out keys from the Object.prototype
if (h.hasOwnProperty(k)) {
text = text + ' ' h[k] + ' ' + k + '<br/>';
}
}
After chat, code came out as follows:
var item = {};
item.name = "Thunderfury";
item.rarity = "legendary";
item.itemLevel = 80;
item.equip = "Binds when picked up";
item.unique = "Unique";
item.itemType = "Sword";
item.speed = 1.90;
item.slot = "One-handed";
item.damage = "36 - 68";
item.dps = 27.59;
item.attributes = {
agility:100,
stamina:200,
dodge:300
};
item.durability = 130;
item.chanceOnHit = "Blasts your enemy with lightning, dealing 209 Nature damage and then jumping to additional nearby enemies. Each jump reduces that victim's Nature resistance by 17. Affects 5 targets. Your primary target is also consumed by a cyclone, slowing its attack speed by 20% for 12 sec.";
item.levelRequirement = 60;
function build() {
box = $('<div id="box">'); //builds in memory
for (var key in item) {
if (item.hasOwnProperty(key)) {
if (key === 'attributes') {
for (var k in item.attributes) {
if (item.attributes.hasOwnProperty(k)) {
box.append('<span class="' + k + '">+' + item.attributes[k] + ' ' + k + '</span>');
}
}
} else {
box.append('<span id="' + key + '" class="' + item[key] + '">' + item[key] + '</span>');
}
}
}
$("#box").replaceWith(box);
}
build();
http://jsfiddle.net/gp0qfwfr/5/

Chosen jquery plugin not updating with <optgroup>

strange situation happening here. I'm using the jquery plugin chosen.js. I'm updating a dropdown that is already on the page with an ajax call and jquery. here is a little bit of the sample code.
here is my dropdown as shown in the page.
<div id="singleDropDownBlock" style="display: none">
<select id="SingleDropDown" class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
<!--<option>select a strating locnation based on category.</option>-->
</select>
</div>
This is the code loading the values into the dropdown using jquery.
function GetResultsFromMultiCategory(data)
{
for (i = 0; i < data.d.categories.length; i++)
{
//console.log(data.d.categories[i].catNode);
if (data.d.categories[i].catNode == "0")
{
$('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
//onOrOff = false; </optgroup>
}
else
{
$('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
}//end second if
}//end first if
}//end else
}
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
$("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
$("#SingleDropDown").trigger("chosen:updated");
}
for some reason chosen does not update with the it only updates with the . Is there anything I'm missing? can someone please point me in the right direction.
I also can't get chosen to update the placeholder. All i get is the first item in list as the display.
thanks in advance for any help you can offer.
I have finally figured out my issue. I'll post the answer here so that it may help someone else someday.
The problem here is that appending one select at a time was being closed by the browser. Therefore here is the best way to do this.
function GetResultsFromMultiCategory(data)
{
$("#singleDropDownBlock").show();
$('#SingleDropDown').append("<option></option>");
var myOptions = '';
for (i = 0; i < data.d.categories.length; i++)
{
if (data.d.categories[i].catNode == "0")
{
myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
}
else
{
myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
myOptions += "</optgroup>";
}
}
}
}
myOptions += "</optgroup>";
$('#SingleDropDown').append(myOptions);
$("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
}
the take away here is that when using append instead of appending each line, build the string and then append it to the html element.

Checking if input values are empty

I'm trying to create a tool that allows users to generate CSS code. At the moment I'm working on input - when a user leaves a text input empty, I'd like a message to appear. The code I have at the moment doesn't seem to work in doing so, any ideas?
$("#btn-css").click(function() {
if( $('input').attr(value) = "" ) {
$('#output').append('All boxes must be completed');
} else {
$('.preview').attr('style', 'box-shadow: ' + $("#h-value").val() + 'px ' + $("#v-value").val() + 'px ' + $("#blur").val() + 'px ' + $("#spread").val() + 'px #' + $("#colour").val() + ';');
$('#output').append('box-shadow: ' + $("#h-value").val() + 'px ' + $("#v-value").val() + 'px ' + $("#blur").val() + 'px ' + $("#spread").val() + 'px #' + $("#colour").val() + ';');
}
});
How about this it will select all text inputs on the page then filter them to be the ones that are empty.
$("#btn-css").click(function() {
var emptyInputs = $('input:text').filter(function() { return this.value == ""; });
if (emptyInputs.length === 0) {
// Everything filled in
} else {
$('#output').append('All boxes must be completed');
}
});
You might also want to do:
var emptyInputs = $('input:text').filter(function() { return $.trim(this.value) == ""; });
This will also pick up text inputs with just whitespace.
use .val().. val() does the exact same thing you mentioned..
if( $('input').val() == "" ) {
to check for all input..
var inputVallength=$('input').filter(function(){
return this.value==""
}).length;
if(inputVallength == 0 || inputVallength < $('input').length){
$('#output').append('All boxes must be completed');
}
$('input').attr(value)
This selects ALL input elements on the entire page.
And also what #Mike Christensen said, you need at least 2 equal signs.
Just do
$(':input').each(function(){
if(!$(this).val()){
//logic
}
});
a Quick fiddle

Categories