document.getElementById("days").innerHTML = document.getElementById("days").innerHTML + daynumber
dayname;
if(dayname.value==6 || dayname==0)
{
daynumber.style.boder("solid");
}
Any idea the formatting why doesn't work?
Without trying to guess what the function is meant to do, you gotta fix the border property, and set it equal to the intended value instead of call it like a method
Also it's "border" instead of "boder", also just the property "solid" usually doesn't do anything unless there are other hidden html rules somewhere that define the width and color, if not hey have to be added
Also, from the latter part of the code it seems daynumber is an HTML element since you are setting the style, yet in the beginning you are adding it to other HTML strings implying it is a string or number. Also in the if statement it appears dayname is an HTML input element since you are reading it's value property, yet in the second part of the if statement you are checking if it itself is equal to 0, implying it is a number, I'm guessing for the second part of that if statement you wanted to check the value again, also I'm guessing daynumber is div element or something similar, since borders usually aren't assigned to inputs unless they have some kind of custom border, so I'm guessing you intended to add the innerHTML property of daynumber to the other innerHTML property. Let me know if there was a different intention
document.getElementById("days").innerHTML = document.getElementById("days").innerHTML + daynumber . innerHTML
if(dayname.value==6 || dayname.value==0)
{
daynumber.style.border = " 1px solid black";
}
Related
I'm new to coding but I am using template literals in a project using css variables. this example sets all the variables in one shot inside a function. this is referring to inputs which all have an eventlistener on them.
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
I want to set another rule for a span to display the values. right now I am doing each one individually like this.
heightDisplay.innerHTML = height.value + 'px';
widthDisplay.innerHTML = width.value + 'px';
all the span's ids will be " this.name + 'Display' "
I want to right a rule that sets them all at once using the literals(similar to the rule that sets the variables) instead of writing 30 lines of code.
I can't figure out the syntax to add Display on there and i don't know where to put the back ticks.
I assume this is possible, since pretty much everything in Javascript is.
Thanks for your time.
I assume that you have an iteration where this Code-Line is Executed:document.documentElement.style.setProperty(--${this.name}, this.value + suffix);
In this Iteration you can set the Values of your spans like this:
var Span = document.querySelector(`[id*= ${this.name}]`);
Span.innerHTML = this.value+ "px";
Edit:
The querySelector - function gets a css-selector as a parameter. the [] - Brackets is a css selector that gets an element with an atribute (in this case id) and a value (this.name). The *= between them means, that you can select an element that has a substring in the value of the atribute.
I am creating a table dinamically from a json. That table does not exist from the beginning, is made with info gotten with an Ajax request.
The problem is, that I want to set a different background-color depending on conditions for each cell. I have tried to asign it with a function, but doesn't work.
If I try to use something like
document.getElementById('id1').style.backgroundColor='#003F87';
does not work
What can I do?
for (h=0;h<24;h++){
i=h*2;
val1 = eval("json."+(root+i));//concat strings and values to access h vars
val2 = eval("json."+(root+(i+1)));
if (val1 != null && val2 != null){
table.append("<tr><td></td><td bgcolor = bcolor(); id="+i+">"+val1+"</td><td id="+(i+1)+">"+val2+"</td></tr>");
}
}
}
i would delegate the conditional background color to css. Just give the table an id or class, and style it with css.
This guy wrote a blog about it after stumbling upon SO question.
I'm in the middle of creating a program in the browser which compares the selections of the user with a list of pre-defined holidays using Objects. I tried to create an object from the selections of the user to use in comparisons and select the most matching holiday, however when I try to select the value (adding .value) it seems to break the flow of Java, and none of the code read afterwards is read.
var climateVar = document.getElementById('climateselect')/.value\;
var accVar = document.getElementById('accomadationselect')/.value\;
var durationVar = document.getElementById('duration')/.value\;
var userInput = new Input(climateVar/.value\, accVar/.value\, durationVar/.value\);
for (var key in userInput) {
var woo = userInput[key];
document.getElementById('someDiv').innerHTML += woo/.value\;
}
without any .value/s, this prints[object HTMLSelectElement]null[object HTMLSelectElement] - (I changed "getElementById" to "querySelector" which simply made it print "nullnullnull")
, but when I try to add .value anywhere, the entire script stops working, and so everything under this will not run. Why on earth would adding .value stop the script from working? Nothing else changed.
Also, I'm a novice at this, this was meant to be a practice project, but I've been stuck on this for about a day now. any other advice you might feel like giving would also be appreciated
everywhere I typed /.value\ I've tried to add .value, and it has had the effect of stopping the code
Are you sure you are calling value on a valid object? The object has to exist and support .value to get a result - e.g.
http://jsfiddle.net/pherris/t57ktnLk/
HTML
<input type="text" id="textInput" value="123"/>
<div id="divHoldingInfo">123</div>
JavaScript
alert(document.getElementById('textInput').value);
alert(document.getElementById('divHoldingInfo').innerHTML);
alert(document.getElementById('iDontExist').value); //errors out
I'm creating a stylesheet for a certain site, using javascript to assign classes to certain elements. For whatever reason some of 'td' elements use weird class assignments and inline styles, so I loop over them, clean them up and assign proper class names to reference in external stylesheet.
I don't have access to the site itself (nor administrative permission to change anything) so I use Stylish and Greasemonkey for Firefox (plus Adblock to dispose of the original stylesheet).
Here is a little part of js code responsible for that:
var cellStyleBg = cCell.style.backgroundColor;
if (cellStyleBg) {
switch(cellStyleBg) {
case 'white':
cCell.removeAttribute('style');
if ( cCell.parentNode.nodeName == 'TR' ) {
cCell.parentNode.className = 'deadlineSet';
}
break;
...
The problem is there is one particular case where this doesn't work:
<td class="td2h" style="background: dd97f0;">
As you can see, there is no octotorp in front of the color code. I assume that is the reason in this one case the variable cellStyleBg is 'null'.
I tried (instead of 'cCell.style.backgroundColor') to use 'cCell.style' and 'cCell.style.background', but they don't return plain text for me to parse.
What can I do to handle this particular case?
I think the only way to go is to get the raw value of the style attribute.
You do this by
//will output background: dd97f0
cCell.getAttribute('style');
If needed, you can breakdown the style into key value pairs using this snippet
//give "background: dd97f0", will output "background=dd97f0"
var stylePattern = /(.*?):([^;]*);?/g
while (match = stylePattern.exec(style)) {
console.log(match[1].trim() + "=" + match[2].trim());
}
I need to get a cascaded style value of an element (not the computed one), or to determine whether the actual value was computed or not.
For example, if I have an element with css rule width: 100%, I want to get the value 100% and not the actual pixels value, or just to know that the actual value was computed.
I know that I can get it using elem.currentStyle, and I also found a way in Chrome to find it using document.defaultView.getMatchedCSSRules().
Does anyone know a way to get it in other browsers?
What about calculating the value yourself? Query the calculated width of the wanted element and the calculated width af the parent element and then do some math to get the percentage-value?
percentageValue = 100% * widthOfWanted / widthOfContainer
At this point I don't think there is a built-in way to do that in browsers other than IE: getComputedStyle will always just return the used value for those properties, like you said.
// The css argument in this example must be a css-style string, not a camelCase string.
function deepCss(who, css, ps){
var sty, dv= document.defaultView;
// IE8 and below
if(document.body.currentStyle){
sty= css.replace( /\-([a-z])/g, function(a, b){
return b.toUpperCase();
});
return who.currentStyle[sty];
}
// everyone else
if(dv){
dv= document.defaultView.getComputedStyle(who, ps);
return dv.getPropertyValue(css);
}
return '';
}
deepCss(document.body, 'background-color')
best route would be to use a browser-indepent api library like jQuery
$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use.