I'm very new to javascript so please forgive me this if it's actually a crazy simple thing to do, but I've been googling and going through all my reference sites with no luck. What I'm trying to do is display a variable's value and change the value the variable either +1 or -1 when the user clicks the appropriate button - like this.
Can anyone help me? Thanks!
The following is an example you can work with. It's a full HTML page, which you can open in a web-browser to see in action. Copy and paste it into a text-file, which you save as example.html. Open it in notepad or something similar to edit it.
This is just one simple example - there are many ways to do stuff like this. Google around, see examples, and play around with them, and it will make sense, bit by bit.
Though it is old, and not always perfect, the examples at W3C may still be a good place to start if you want to know more.
<html>
<head>
<script type="text/javascript">
var currentValue = 0;
var add = function(valueToAdd){
alert("adding: " + valueToAdd);
currentValue += valueToAdd;
document.getElementById('number').innerHTML = currentValue;
};
</script>
</head>
<body>
<div id="text">Number of eggs:<span id="number">0</span><div>
Plus 1
Minus 1
</body>
</html>
UPDATE: One little addition: If you want a fairly new and good book on Javascript, and want to learn it "correctly", then JavaScript: The Good Parts is probably the book you want. It is not a big book (just under 100 pages if I remember correctly), but gives a nice overview of the language.
Related
I'm currently learning to code in javascript and jquery so my knowledge is exceptionally poor. Im trying to edit a script(with lots of googling) that was written in tampermonkey by a friend and I assume I havent been able to find the answer through search as I have been using the incorrect terms - but dont know what they are.
this is the HTML
<span class="village_anchor contexted" data-player="9281645" data-id="804">
Black Reaper (492|489) K44
<a class="ctx" href="#"></a></span>
All I want to do is get the address that links to and then use location. to go there.
Once again, apologies for my lack of prowess and thankyou for any help.
All you have to do, is to select the spanby his class and then finds the a tag you want.
So you can write this:
var linkhref = $(".village_anchor").find("a").first().attr("href");
Then, you can do the "redirection":
document.location = linkhref;
Use this code.
var address = $('span.village_anchor.contexted a:eq(0)').attr('href');
window.location.href = address; //to open the link in same page.
I'm completely new to Javascript and trying to learn some basics
I'm making a webpage that add's up totals etc and right from the start i'm having a problem.
I'm looking at videos on lynda.com and i've also searched the net.
it's something very simple i'm trying to do.
I have a variable set to 30 and I want to display that on my page.
var points = 30;
document.write(points);
I also had 30 in double and single quotes which didn't work.
My HTML is
<p id="points"></p>
What I want to happen is I want the variable to display on site. So in this case I want 30 to display on site.
it's not at the moment.
Any help would be great.
thanks.
The correct code is:
var points = 30;
document.getElementById('points').innerHTML = points;
Use innerHTML for change the HTML code and use innerText to change only the text.
Maybe you forgot to implement the script:
<script src="path/and/yourscriptname.js"></script>
<p id="points"></p>
An easier method to peek into variables at certain points is to use console.log().
For example, console.log(points); will output 30 so your browser console.
To view the browser console, Google how to view the console for the specific browser you're using. Here's how to view it on Chrome.
I'm aware that this is an 'old question' by now, but I have searched and not yet found an explanation that makes sense to me.
Note: I know just enough html, css, and wordpress to have developed my website: (http://www.gregorygainsborough.com), and am just beginning to learn javascript.
If you visit my site, you'll see the problem - much of the content is revealed when various boxes are hovered on. On tablet, since there is no :hover, I'd like to make it do this:
First tap -> reveal the style that would have been applied on :hover.
Second tap -> follow the link like a mouse click would.
ALSO helpful would be to 'close' the :hover style when a) another element is tapped, or b) ten seconds elapse.
Thanks for any help you can offer. I'm aware that some of this will be above my js knowledge at present, and I'm looking for explanations or references which can help me target my learning and close that gap.
I would in PHP make a IF statement to check if Tablet is used.
You can use this Library for this. Then I would in the IF statement echo this javascript out:
var clicked = 0;
$('a.iftablet').on('click',function(){
var old_clicked = clicked;
var number = $(this).attr('tablet_id'); // Get the tablet ID for this item
var clicked = number;
if (old_clicked != number){ return false;} // This might do the trick, so that on first click, it doesn't link.
});
NOTE: I use jQuery, so you need the jQuery library.
NOTE 2: Add class="iftablet" to the links around the boxes, and add as well tablet_id="X" (Where X is a unique number for that box, so that when click on one box, the others will disapear).
Maybe there is some errors on the code, put then let me know. Good luck
For lack of a better title, I'm looking to take the example I have in my jsfiddle, and convert it to pull the number that's within a div (it will always be a number):
<div class="output" id="i1">100</div>
And pass that number through a formula, to spit it out in real time to a p tag (doesn't need to be a p tag, could be another div.
<p>200</p> or <div id="i2">200</div>
Where the 200 above, is calculated by adding the original value of the div id #i1, plus 100. Right now, the fiddle shows that when you enter in a value for the input, it spits out the real time calculation.
So the question is, what would it look like where instead of an input value, the function would be pulling the numerical data out of the DIV tag, running it through a function, and spitting it back out into a paragraph tag? I think the bulk of it is completed functionality wise, but can't quite figure out the pulling from DIV text.
Some posts I've looked at already include this one about real time inputs, this one on calculations and displaying, and a few others on here.
SOLUTION
This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.
You may consider using a Observer pattern here.
Check this for more. http://canjs.us/#can_observe
to get the text from a div and then parse it to a float, use this:
parseFloat(document.getElementById('i1').childNodes[0].nodeValue)
This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.
<form id="vcForm">
<div id="i1">100</div>
<p></p>
</form>
$("#i1").keyup(function() {
var input1 = parseFloat($("#i1").text(),10);
var input2 = 100;
total1 = parseFloat(input1) + parseFloat(input2);
$("p").text(total1);
}).keyup()
The value in that first DIV will be dynamic (changing via a slider). Of course, we'll see about real time updates when I expand this out functionally, but for my original question, this answered it.
What I want to do is pretty simple. Above my blog I want to have a text paragraph with an explanation of the site. However I do not want it to be at the top of every page on the site ONLY the index page. My host has a very restrictive format. I've already asked them for help and it isn't possible with their editor. I cannot edit all of the html but I can change some. Javascript seems to be allowed so I have been trying things like:
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
if (url==http://mysiteaddress/index.html)
{document.write('Welcome to my site')}
//-->
</SCRIPT>
Taking out the if statement, it successfully writes 'Welcome to My site'. So I'm wondering what is wrong with the if statement. I've also tried adding an 'else' in order to see output on any page but have not had any luck.
I obviously don't know much yet so any help would be appreciated. Thanks!
The url is available via location.href - not sure why you think url exists.
Besides that, mime types are lowercase and the language attribute is obsolete. So use <script type="text/javascript">.
Additionally it'd be better if you didn't use the infamous document.write but document.getElementById('someDiv').innerHTML = 'your html here';
Or get jQuery and simply write $('#someDiv').html('your html here');
Just to add, you can prepend an element to the body element like this:
var p = document.createElement("p");
p.innerHTML = "I am a paragraph";
document.body.insertBefore(p, document.body.firstChild);
You can try it here.
Reference: https://developer.mozilla.org/En/DOM/Node.insertBefore