deldalton
-
Posts
83 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by deldalton
-
Hi TheScientist. My opening post shows two separate bits of JS code. The first batch works, and can be seen in action by following the CodePen link. The second batch, however, doesn't work. Ingolme advised that it's because the script is loaded before the elements, that the variables are trying to identify, have been loaded. That makes sense. Ingolme then suggested that I could create some undefined variables and then use an onload function to provide the global variables with values. That makes sense, too. So, I add the above onload code into my JS and HTML. Unfortunately, I'm still getting the same problem where it believes the global variables have not been defined. I hope that helps clarify my question.
-
Okay, so I added this to the top of my JS script. var nav;var button;function updateVar() { var nav = document.getElementById("navBar"); var button = document.getElementById("navButton");} I then added this to my HTML. <body onload="updateVar();"> It doesn't like that at all. But, I don't know why. Providing I've got the "onload" bit correct, then it'll call the updateVar function and update the global variables and we're away, surely?
-
I'd really like to try and put together something purely in JS, rather than having to use JQuery. I'll let you know how I get on. Thanks, Ingolme!
-
Oh, I see. I have two possible solutions. Can you please tell me if either of them are possible and/or whether there is a reason they would not be suitable? 1. Put the link to the script at the bottom of the HTML document so that all elements load first, then the script. 2. Put the global variables in the HTML document, then leave the link to the script in the <head> element, as usual.
-
The code below works fine (apart from in Safari but that's a different problem). You can see the working code in action here: http://codepen.io/deldalton/full/mfoIi function expandNav() { var nav = document.getElementById("navBar"); if (nav.className == "collapsed") { nav.className = "expanded"; document.getElementById("navButton").src="images/lightNavUp.png";} else { nav.className = "collapsed"; document.getElementById("navButton").src="images/lightNavDown.png";}}function changeIconOnMouseOver() { if (document.getElementById("navBar").className == "collapsed") { document.getElementById("navButton").src="images/lightNavDown.png";} else { document.getElementById("navButton").src="images/lightNavUp.png";}}function changeIconOnMouseOut() { if (document.getElementById("navBar").className == "collapsed") { document.getElementById("navButton").src="images/darkNavDown.png";} else { document.getElementById("navButton").src="images/darkNavUp.png";}} However, using the following code which is basically the same thing except using global variables instead of "document.getElementById"s all the time, doesn't work. var nav = document.getElementById("navBar");var button = document.getElementById("navButton");function expandNav() { if (nav.className == "collapsed") { nav.className = "expanded"; button.src="images/lightNavUp.png";} else { nav.className = "collapsed"; button.src="images/lightNavDown.png";}}function changeIconOnMouseOver() { if (nav.className == "collapsed") { button.src="images/lightNavDown.png";} else { button.src="images/lightNavUp.png";}}function changeIconOnMouseOut() { if (nav.className == "collapsed") { button.src="images/darkNavDown.png";} else { button.src="images/darkNavUp.png";}} Can anyone tell me why?
-
Okay. So, in my ongoing attempt to learn JavaScript, I've been given the following task. Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as an argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise. Please see the solution they provided below. function greaterThan(x) {[indent=1]return function(y) {[/indent][indent=2]return y > x;[/indent][indent=1]};[/indent]} var greaterThanTen = greaterThan(10); show(greaterThanTen(9)); Why would I write a function, like the one above, when I could write a function like the one below? function greaterThan(x, y) {[indent=1]return y > x;[/indent]}; show(greaterThan(10, 9)); And, secondly, how is the first code actually being interpreted? Why do we have to create a new variable storing the value of "greaterThan(10)"? Why can't we simply write show(greaterThan(10(9))); ? Perhaps I need to find some better resources to study from. I'm clearly missing something.
-
justsomeguy. Thank you for the explanation and examples. I had already come across these exact explanations and examples, shortly before reading your post, which definitely helps explain what's meant to happen and how you can apply a recursive function. I only wish the many articles I had read previously had used your post! I appreciate that I have an understanding of it now but it is actually fairly simple. The problem, I think, is the lack of resources explaining it so simply.
-
So, perhaps, my question should be re-written ... Can anyone provide a "real-life" application for the recursive function?
-
I've found and read through an article that shows, through the use of diagrams, how Javascript interprets the code. I would link to the article but I'm uncertain if it's allowed, as it does mention another website that is also dedicated to teaching web coding etc. Now, the maths I understand. And the diagram explains what it's doing. I think my problem is simply that I haven't seen enough examples and that the examples aren't applied to a task that, of yet, seems useful.
-
He's another example I'm looking into to help me understand recursion. function factorial(n) { // Termination condition to prevent infinite recursion if (n < 0) { console.log("Can't make a factorial from a negative number."); return; } // Base case if (n === 0) { return 1; } // Recursive case return n * factorial(n - 1);}factorial(6); So, in this particular example, when factorial(6) is called this, at least in my mind, is what happens. 1. Check to see if n (6) is less than 0. 6 is not less than 0 so skip code within braces and move on to next line of code.2. Check to see if n (6) is equal to 0. 6 is not equal to 0 so skip code within braces and move on to the next line of code.3. Return the value of n * factorial(n - 1). Or, n * factorial(5). So, 6 * 5 which is 30. 3.1. Check to see if n, which in this new instance is equal to 5, is less than 0. 5 is not less than 0 so skip code within braces and move on to the next line of code. 3.2. Check to see if n, which in this new instance is equal to 5, is equal to 0. 5 is not equal to 0 so skip code within braces and move on to the next line of code. 3.3. Return the value of n * factorial(n - 1). Or, n * factorial(4). So, 5 *4 which is 20. Now, I won't continue any further, because I already know this is incorrect and I'm missing something. I know that at 3.3 it should, in fact, multiply 30 by 4. But, I don't understand where the value 30 (which is calculated at step 3.) is stored for it to be "called" in 3.3.
-
Thank you for your suggestions and input. I think that what I'm struggling to understand is how/where the loop stores the values it finds and then how it calls them in the next cycle of the if loop. Because I can't see how the start and history values are produced in the next cycle I can't see how it completes. I really hope that makes sense. Deirdre's Dad. Your alert/print suggestion was brilliant. Although I'm still stuck at this point, it's clear that seeing the found values during each cycle of the loop will help me understand what is happening. davej. I will have a read through the explaination you provided in the link. Thank you. justsomeguy. Thanks for pointing out that the values of start and history are not actually changed but that a new copy of the function is created with new values. This, I think, is the part I'm stuck on. I can't see what the new values are or how they're applied to be used the next time "find" is called.
-
I'm trying to learn Javascript and I've just briefly read about recursion in functions. I've been given the following task. Consider this puzzle: By starting from the number 1 and repeatedly adding 5 or multiplying by 3, an infinite amount of new numbers can be produced. How would you write a function that, given a number, tries to find a sequence of additions and multiplications that produce that number? For example, the number 13 could be reached by first multiplying 1 by 3, and then adding 5 twice. The number 15 can not be reached at all. Here is the solution: function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1");} print(findSequence(24)); If this code is run the following is printed to the console: (((1 * 3) + 5) * 3) In my head, the code is processed in the following steps. 1. findSequence is called, with a parameter value of 24.2. findSequence calls find giving the first parameter a value of 1 and the second parameter a value of "1".3. The find function looks to see if the start parameter value is equal to the value of the goal parameter.4. As the start parameter value, in this particular case, is not equal to the value of the goal parameter, check to see if the start parameter value is larger than the goal parameter value.5. As the start parameter value, in this particular case, is not equal to the value of the goal parameter, return one of the following statements:find(start + 5, "(" + history " + 5)")orfind(start * 3, "(" + history + " * 3)" However, this is then where I become stuck. I can't quite understand the statements it's trying to then run. I can see that find(start + 5, changes the value of history to 5. Then "(" + history + " + 5)") . This to me would print (1 + 5 ( + 5) + 5)). Similarly I see the other statment printing as (1 * 3 ( + 3) * 3)). I just can't quite grasp what I'm missing. I suspect it's something obvious and really simple but it would be great if someone could provide me with the missing pieces. I appreciate that there is most likely an alternative way of coming to the same result. However, I'd like to fully understand what is being shown to me here before I move on. Many thanks.
-
I'm disappointed. I read through MisterCatapult's code and missed this! To expand a little further, CSS commenting is implemented using the following opening and closing tags ... "/*" and "*/" without the quotation marks. The latter being the closing tag.
-
By default, divs are block elements. They will be put on a new line. If I've understood what you've said correctly, then you want the Facebook link to appear beside the search inputs, rather than below it. Change the "facebook" div to an inline element. Let me know if that's what you're after. More information can be found here ... http://www.w3schools.com/css/css_display_visibility.asp
-
The only editor I've used is Notepad++. I can't fault it yet.
-
Srautpyaa. By default, div elements are "block" elements. A block element is an element that takes up the full width available, and has a line break before and after it. You need to change both of your divs display properties to "inline". Like so ... <div style="display:inline;">Satyaprasad</div><div style="display:inline; border-bottom: 2px dotted #000000"></div> What you'll then find is that the two divs sit side by side. You may also notice that I've removed the "float:left" property as I believe this is no longer required. However, that may depend on what exactly you intend to do next. What you'll find though, with the code above, is that the dotted border only appears if the second div has content. If you simply want the text beside some dotted lines you could try this. <div><p>Satyaprasad..................................</p></div> Alternatively, if you could provide us with some additional information as to what exactly you're aiming for we may be able to give you some other suggestions.
-
Terryds. As Spunky has suggested, if you're unfamiliar with HTML then you may find it a little tricky at first. However, there are some great resources on the w3schools.com website which will tell you all you need to know. Try looking at this ... http://w3schools.com/html/html_layout.asp#gsc.tab=0 Once you understand the basics you'll then want to take a look at CSS (particularly CSS positioning) to get your desired look, which you can read about here ... http://www.w3schools.com/css/css_positioning.asp#gsc.tab=0 Of course, you have to know how to apply CSS in the first place. If you don't, I would suggest starting from the beginning of the CSS documentation on the w3schools website.
-
Ingolme. I thought that might be the case. Thanks! DaveJ. Thanks for the suggestion. I'll look into it.
-
Exactly! ...
-
I have a div that contains an image. I would like the image to change, approximately every 5 seconds, to another image. There may be up to 10 images that I would like to have rotate (although I suppose the amount of images is, perhaps, irrelevant). I know that this is possible with Java Script. I've seen it work and suspect it's actually fairly straight forward (I'm sure there's countless tutorials on the internet, if I really get stuck). What I'd really like to know is if this is possible without using Java Script and instead using CSS? I believe it's possible in CSS3, as I read an article earlier with someone suggesting it was possible (but their demos weren't working in Internet Explorer). But that is, of course, a problem. I'd like a solution that I can use in most "major" browsers (IE, Chrome, Firefox, Safari etc.). CSS3 is only supported on the latest browsers and, even then, not all features are compatible. So, I don't think that's the answer. Does that leave me with no choice but to use Java Script?
-
Glad it's sorted, -pollux-. Can you post your solution?
-
Spunky. Yes, you're original solution was the same. Apologies for not crediting your suggestion, too. Thanks so much for the help.
-
If you haven't already, it might also be worth posting your query on the stackoverflow.com forums. If you find your answer elsewhere though, please make sure you post it here so we can all benefit from it too.
-
Sorry, Luponius. I completely missed this somehow ... /*Power Storage*/.batteryZone { width:45.5%;... If every container was given it's dimension as a percentage, and was relatively positioned, including the images, then I would expect them all to resize appropriately based on the size of the browser window. However, that's not going to change the size of your text. The other problem here is, of course, that if a particular screen was much longer against it's width, compared to another screen then the images may stretch ... which, I suspect, isn't what you're after. There must be a way to preserver the images and container ratios but I'm not sure how. I know whenever I've resized an image, if I only specify one dimension, it tends to keep the images height:width ratio but I don't know if this could be applied here. I think the only way to get your code to recognise when a particular screen resolution/size is being used is to use Java Script. But, I'm not familiar enough with CSS yet ... let alone Java Script. But, hopefully, someone on else on here will be able to give you a real solution. Sorry I couldn't be of any help.
-
What Niche has said sounds correct to me. Then, as you've suggested, you should be able to use Java Script to call an if statement.
