We Keep Coding

Call function on element (that does not have unique id) on hover

When hovering over generic elements of the same type, I want to execute a function on this elements that will perform an animation. However as these elements do not have unique ids I'm not sure how to uniquely identify them in JavaScript. Is there a way to use the this key word for this? I do not want to give them all unique ids because a huge amount of the same element and it seems redundant. Any help would be greatly appreciated thanks.
Heres some code I was playing with to try and get this to work. Preferably the simpler the code or using basic javascript better.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});

red is not a variable, it is a string. So that you have to use 'red':
To set the color using JavaScript you have to use style property :
$(document).ready(function(){
$("span").hover(function(){
this.style.color = 'red';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
OR: Using jQuery use .css()
$(document).ready(function(){
$("span").hover(function(){
$(this).css({color: 'red'});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

You can user class as a selector
give the same class to all <span> element
Try Following
$('.hoverTest').hover(function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>
Refer Jquery Hover() for more details

javascript - one image,two actions

I am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.

You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>

In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.

you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>

Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html

I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much

Simple toggle div visibility with Javascript not working

This is very frustrating as it seems so simple yet is not working.
In my body I have
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<inputtype="button" value="Start" onClick="splash();" />
</div>`
And in my head, within script tags I have
function splash() {
var divSplash = document.getElementById("splashscreen");
divSplash.style.display = "none";
}
Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?

The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.
I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.
<script type="text/javascript">
function startGame() {
var divSplash = document.getElementById("splash");
divSplash.style.display = "none";
}
</script>
Also, the language property is now obsolete.

Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').
When I fix the typo, it works.

You're not using the same id :)
spashscreen != splashscreen

Here is the answer in a jsfiddle
HTML:
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<button onclick="splash()">Start</button>
</div>
Javascript:
function splash() {
var divSplash = document.getElementById('splashscreen');
divSplash.style.display = "none";
}

Javascript's getElementById and innerHTML Don't Work Indirectly

Here is my code:
<html>
<head>
<title>My Game Title Goes Here!</title>
<script type="text/javascript">
function startGame(){
document.getElementById("2").innerHTML = ('Testing!');
}
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
</script>
</head>
<body>
<div class="title" name="Game Title" id="0">Game Title</div>
<div tabindex="0" class="gamecontainer" name="Game Container" id="1">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
</body>
</html>
I doesn't work like I expect it to (I'm using Google Chrome).
It only works if I run it directly, like this:
<div tabindex="0" class="gamecontainer" name="Game Container" id="1" onkeypress="document.getElementById('2').innerHTML = ('Testing!')">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
I checked over my code tons of times and i cannot find any clear mistakes like typos or anything. If that is the problem then I am sorry to have wasted your time but this is realy buggin' me.

Element IDs can't start with a number, it's almost definitely contributing to your issue here. Change the IDs in both the HTML and JS to begin with a letter.
Second of all, the keyListener line should probably be something like this:
window.onload = function(){
document.getElementById("newId").onkeypress = startGame;
}

document.body doesn't have an onload property. It should be window.onload instead.
window.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
DEMO: http://jsfiddle.net/9khng/

Change :
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
To:
document.body.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
And, id shouldn't begin with a number as it's an invalid HTML.
Chrome seems to overcome this mistake, but it shouldn't be used.
And move the code to the the <body> tag or use window.onload
document.body doesn't exist above the <body>.

I think IDs can't start with a number.

Try fixing your "onkeypress" attribute. Your quotes are messed up.
onkeypress="document.getElementById('2').innerHTML = ('Testing!')"

How do I get the content of a <span> using jQuery?

How do I get the content 'This is my name' of the span?
<div id='item1'>
<span>This is my name</span>
</div>

I think this should be a simple example:
$('#item1 span').text();
or
$('#item1 span').html();

$("#item1 span").text();

Assuming you intended it to read id="item1", you need
$('#item1 span').text()

$('#item1').text(); or $('#item1').html(); works fine for id="item1"

Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:
<div class='item1'>
<span>This is my name</span>
</div>
alert($(".item span").text());
Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:
<html>
<head>
<title>jQuery test</title>
<!-- script that inserts jquery goes here -->
<script type='text/javascript'>
$(document).ready(function() { alert($(".item span").text()); });
</script>
</head>
<body>
<div class='item1'>
<span>This is my name</span>
</div>
</body>

You could use id in span directly in your html.
<span id="span_id">Client</span>
Then your jQuery code would be
$("#span_id").text();
Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span.
So
$("#span_id").val();
will return null.

In javascript wouldn't you use document.getElementById('item1').innertext?

$('span id').text(); worked with me

$('#id span').text() is the answer!

$('#item1 span').html(); Its working with my code

VERY IMPORTANT Additional info on difference between .text() and .html():
If your selector selects more than one item, e.g you have two spans like so
<span class="foo">bar1</span>
<span class="foo">bar2</span>
,
then
$('.foo').text(); appends the two texts and give you that; whereas
$('.foo').html(); gives you only one of those.

<script>
$(document).ready(function () {
$.each($(".classBalence").find("span"), function () {
if ($(this).text() >1) {
$(this).css("color", "green")
}
if ($(this).text() < 1) {
$(this).css("color", "red")
$(this).css("font-weight", "bold")
}
});
});
</script>