I can't get my JS/HTML to write if x & y radio buttons is selected...
my code:
http://dumptext.com/6rR25ynt
There are a few things wrong with your code:
you define the function Pris(), but you miss the closing bracket, so the function is not available. Also the if that is testing whether the radio buttons are checked is not correct.
Test this:
<script type="text/javascript">
function Pris() {
var S4A = document.getElementById("S4A");
var S5A = document.getElementById("S5A");
var Skade1 = document.getElementById("Skade1");
var Skade2 = document.getElementById("Skade2");
var Skade3 = document.getElementById("Skade3");
var Skade4 = document.getElementById("Skade4");
if (S4A.checked && Skade1.checked){
document.write("2412kr")
}
}
</script>
There are a couple of things going on here. First, in your comparison, I think you're trying to see if both are checked:
if (S4A && Skade1 == checked){
But to do that would look like this:
if (S4A.checked && Skadel1.checked){
Second, you have an if block at the bottom which refers to variables which have not been defined:
if((x == false) && (y == false)){
}
Also as a general note, you want to use === instead of == as much as possible, because == does automatic type coercion.
Finally, and this is actually the first error I found, you have no closing brace for your Pris function. It looks like the if((x...etc block wasn't given a closing } of its own. Mismatched braces will keep your code from executing.
Hope this helps.
Edited to add: working jsbin
Related
I've made a bunch of JavaScript functions to show, hide and populate various elements on a zooming menu. All seem to working except for one which I need the function to only run if a CSS setting is a specific value (width of 195%). I am very new to JavaScript so there may be more than one issue here.
<script>
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if widthNow = '195%' {
document.getElementById('zoomTitle').style.display = 'flex';
else
document.getElementById('zoomTitle').style.display = 'none';
}}</script>
You need to use comparison operators write the if statement as follows
if (widthNow == '195%') {
as the single = is assigning the value not comparing it
There are a few issues with your syntax:
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if (widthNow === '195%') {
document.getElementById('zoomTitle').style.display = 'flex';
} else {
document.getElementById('zoomTitle').style.display = 'none';
}
}
Thanks everyone. It works now with a combination of the changes suggested. I assume my curly braces are all in 'tidy' positions?
EDIT. I've adjusted the curly brace positions to as per Ed's layout.
Thanks all!
Your code does not called when the element changes it size or width. You must put all your code inside window.onresize event.
var displayOutput = document.getElementById("display-option");
function reportWindowSize() {
displayOutput.text = document.getElementById("element-to-check").style.width;
}
window.onresize = reportWindowSize;
<p id="element-to-check">Resize the browser window to fire the <code>resize</code> event.</p>
<p>Display: <span id="display-option"></span></p>
My goal is to have a button (controlled by a javascript function) that would toggle the entire CSS on the website on and off. I thought this was a common practice and was surprised when I couldn't find a complete solution here or on the web.
Here is what I got.
$("#button").click(function() {
var css = (document.styleSheets[0].enabled = true);
if (css == true)
{
document.styleSheets[0].disabled = true;
css = (document.styleSheets[0].enabled = false);
}
else if (css == false)
{
document.styleSheets[0].disabled = false;
}
});
A simple Jquery function that targets the button by ID and performs an if test. I could've ommited the variable, but this way I am able to check the value easily in console.log. I am able to turn the CSS off, but not back on. The program doesn't even get to the else condition.
I am aware that the else if is not really appropriate, but with just else (and even just with another if condition) the function doesn't run at all.
Second option that I thought of, and which might be much easier is just dynamically changing the contents of the link href attribute, where the path to the css file is given.
But I am struggling to target the href element with Javascript.
This is a simple Boolean toggle so write it as a simple toggle
$("#button").click(function() {
var sheet = document.styleSheets[0];
sheet.disabled = !sheet.disabled;
});
As for why your code isn't working as is,
var css = (document.styleSheets[0].enabled = true);
// same as
var css;
document.styleSheets[0].enabled = true;
css = true;
which means
if (css == true)
// same as
if (true == true)
which always holds so you'll always follow this code path
Well, for one you need to loop through all of the stylesheets.
Also, you can save some lines of code by using a counter, then on each button click increment the counter and use the % modulo operator to turn that into a 1 or a 0, which you can then coerce a boolean from using !!.
var count = 0;
var sheets = document.styleSheets;
$("#button").click(function() {
for(var i in Object.keys(sheets)) sheets[i].disabled = !!(++count % 2);
});
.demo {
background: #888;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">Some Text</div>
<button id="button">Click It</button>
Your problem is that you are doing an assignment when you should be doing an equality check.
You have
var css = (document.styleSheets[0].enabled = true);
But you are really trying to do an equality check, i.e.,
var css = (document.styleSheets[0].enabled == true);
Notice the extra =. The single = does an assignment, so your current code is equivalent to this:
document.styleSheets[0].enabled = true
var css = document.styleSheets[0].enabled; // i.e., true
Because you set enabled to true, your if (css == true) condition is always satisfied, so your code always turns the CSS off and never turns it back on.
The fix, as Paul S. wrote in his answer, is just to toggle the value of document.styleSheets[0].disabled, as in:
$("#button").click(function() {
document.styleSheets[0].disabled = !document.styleSheets[0].disabled;
});
There's no need to set and track a new property enabled.
The issue seems to be that you are doing assignment, and not comparison, on this line:
var css = (document.styleSheets[0].enabled = true);
It should be
var css = (document.styleSheets[0].enabled == true);
Probably simpler, since you have a jquery tag on the question, to just do:
$stylesheets = $('link[rel="stylesheet"]');
$("#button").click(function() {
$stylesheets.attr('disabled', !$stylesheets.attr('disabled'));
});
If you want to modify every href in your DOM,
just use
$('a[href*=]').each(function () {
var $this = $(this);
$this.attr('href', $this.attr('href').replace();
});
I know this has been asked; and I've read most of the asked questions to no avail. I still am having trouble. I want to click an image and have the image source change (thus having the image change).
This is my HTML:
<img id="picture1" onclick="showHide('builder1'); change('picture1');" width="25" height="25" src="pictures/down.png">
Ignore the "showHide('builder1');". It's working. I need help on the change('picture1').
And this is my Javascript:
function change(id)
{
var isDown = true;
var picture = document.getElementById(id);
if(isDown === true)
{
picture.src = "pictures/pullup.png";
isDown = false; //No longer a down arrow...
}
else
{
picture.src = "pictures/down.png";
isDown = true;
}
}
I am able to change the picture once (to 'pictures/pullup.png') but can't change it back.
I also added alerts at certain points in the if/else statement to see where it was at; and it never even reached the 'else' part of the statement.
Move var isDown = true; outside the function scope - define it before the function.
This way, every time you run the function, you set the variable to true first.
Based on Mike's comment: you could also use something like this:
picture.src = "pictures/"
+ (picture.src=="pictures/pullup.png" ?
"pulldown.png"
: "pullup.png");
Or with an IF if you dislike ternary.
You are defining isDown in the same statement, everytime, to be true. So it will never reach the else block of your conditional statement.
Here is the HTML:
<form>
<textarea id="input1"></textarea>
<textarea id="input2"></textarea>
<span></span>
</form>
the js:
$("#input2").keyup{
var a = document.getElementById("input1").length;
var b = document.getElementById("input2").length;
var c=a+b;
$("span").html(c);
}
each time 'c' reach multiple 140, i need it to be added by 'b',
I've try to do this:
while(c%140 == 0){
c=c+b;
}
at 140th keyup, yes its added, but next keyup(141th) and so on 'c' back to it's value added by notihng. How to do this correctly?
thanks.
I can't be sure that I'm reading this question correctly, but if my jsfiddle of your code is a close approximation, the solution may be as simple as getting rid of the var in front of c when you add a+b. If you want c to have a persistant value, you need its scope to be outside the keyup event handler.
From the fiddle:
$(function() {
var c = 0;
$("#input2").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
if(c%140 == 0){
c=c+b;
}
$("span").html(b);
});
});
Notice that's an if, not a while. If it's supposed to be a while loop, that's an easy change to make.
Update
I think I have an idea what's going on here. You want to keep track of the total character count of your multi-page SMS messages. The updated jsfiddle has the answer to the question you wouldn't just come out and ask.
Here's the new code:
$(function() {
$("#input2, #input1").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
c+=Math.floor(c/140)*b;
$("span").html(c);
});
});
Now, this of course assumes that input1 holds your actual message while input2 holds some text that needs to be displayed on each page. If it's the other way around, or if there's some other purpose for this code, please let me know.
I'm really new to JS and not a developer by any stretch of the imagination! I've got the code setup to generate a random number for me from an input box and dropdown list. Basically start at x, choose a maximum number form the DDL and calculate a random number in between. Code came from CSS Tricks and I've tweaked it to work for me and coded up the HTML page.
All works fine, but I'd like to animate the answer. At the moment it just appears, and it's less than elegant. I'd like something as simple as fading it in. But all the functions I try cause the calc to stop working and no number appears, let alone animated. Any chance of some guidance as to where in my string of code I need the animation to go?
function IsNumeric(n){
return !isNaN(n);
}
$(function(){
$("#getit").click(function() {
var numLow = $("#lownumber").val();
var numHigh = $("#highnumber").val();
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
$("#randomnumber").text(numRand);
} else {
$("#randomnumber").text("Erm...");
}
return false;
});
$("input[type=number]").each(function(){
$(this).data("first-click", true);
});
$("input[type=number]").focus(function(){
if ($(this).data("first-click")) {
$(this).val("");
$(this).data("first-click", false);
}
});
});
Error message from the JS Console:
SyntaxError: illegal character
$(#randomnumber).fade("slow");
--^
For selectors you have to use strings: $("#randomnumber").fade("slow");