Trouble in passsing form object to javascript from an hyperlink - javascript

All
<input type ="button" value ="test" onClick="SelectAll(this.form);" />
<script ......>
function SelectAll(form)
{
alert(form);
}
</script>
method 1 produce an alert message 'undefined' while 2 method works fine by displaying form object . I'm very much aware that anchor elements don't have a form property, that references the form , unlike input elements,but is there any alternative way to pass form object using hyperlink or is there any way to style the button to look like an hyperlink
Thanks

Try this...
onClick="SelectAll(getParentForm(this));"
function getParentForm(el) {
while(el = el.parentNode) {
if(el.tagName.toLowerCase() === "form")
return el;
}
return null;
}

Since the anchor is not a form control, it doesn't have a form property. You would need to find some other way to reference the form (or stick to a button, which is the right choice of control for something like this).

Honestly? I think your best approach is to not use an anchor element at all. It's not really a link, so that's actually a misuse of HTML.
Use a button element instead, which does have a form property. If you really want it to look like a link, slap on a little CSS to make it look like one.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
button.link {
border: none;
background-color: transparent;
color: blue;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
}
</style>
<script type="text/javascript">
function SelectAll( f )
{
alert( f );
}
</script>
</head>
<body>
<form id="test">
<button class="link" onclick="SelectAll(this.form)">All</button>
</form>
</body>
But there are probably a dozen other ways to get a reference to the form element itself. If your form definition looked like this
<form id="test" name="tester">
and it's the only form on the page, here are some ways to obtain a reference to it
document.forms.tester
document.forms['tester']
document.forms[0]
document.getElementById( 'test' )

Related

Detect mouse speed using jQuery

I want to detect mouse speed, for example the event will be fired only if the detected number is greater than 5
I found one example which I think is something similar: http://www.loganfranken.com/blog/49/capturing-cursor-speed/
but i am not able to make it see the number which is inside div and fire the event based on the resulting number, this is my attempt:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
onUpdateSpeed: function(speed) {
$speedometer.text(speed);
},
updateSpeedRate: 20
});
$("#test-area").mouseover(function(){
if(this.value > 5) {
console.log("asdasd");
}
else {
console.log("bbb");
}
})
});
</script>
<style>
#test-area
{
background-color: #CCC;
height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>
</body>
</html>
(I'm the author of the plug-in that's causing the trouble here)
The example isn't working because this.value isn't referring to the speed (it's undefined). Here's an updated version of your example:
http://jsfiddle.net/eY6Z9/
It would probably be more efficient to store the speed value in a variable rather than within the text value of an HTML element. Here’s an updated version with that enhancement:
http://jsfiddle.net/eY6Z9/2/
Hope that helps!

How do I replace a bit of text with string variable in javascript?

I know this is a really simple question, but I need to replace this bit of text in a paragraph with a variable every time an even fires.
The markup looks like this
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {width:100%; text-align:center; }
#heading {width:100%; text-align:center; }
</style>
</head>
<div id="heading">
<h1>hello</h1>
</div>
<body>
<div id="container">
<textarea name="mytextarea" cols="60" rows="40"></textarea>
</div>
</body>
</html>
What I need is where it says "hello" in the tags, is for that to be a variable that van be replaced by a string that I will generate.
You could create a function that looks something like this.
function replaceTitle (replaceText) {
document.getElementById("heading").getElementsByTagName("h1")[0].innerHTML = replaceText;
}
If you are using jQuery it could look more like this.
function replaceTitle (replaceText) {
$("#heading h1").html(replaceText);
}
Then you call the function like this
replaceText(yourVariable);
It would probably be better to give your <h1> tag an id or a class so you can reference it directly, but I am going to assume that you have good reason for not doing so.
One example on how can be simple things made complicated :)
javascript:
// simple way:
function replace_text(text) {
var heading = document.getElementById('heading');
heading.innerHTML = '<h1>' + text + '</h1>';
}
// complicated way:
function replace_text2(text) {
var heading = document.getElementById('heading');
var node = heading.childNodes[0];
while ( node && node.nodeType!=1 && node.tagName!='H1' ){
//console.log(node.nodeType,node);
node = node.nextSibling;
}
if (node) {
node.replaceChild(document.createTextNode(text),node.childNodes[0]);
}
}
html:
<input type="button" onclick="replace_text('HELLO 1!');" value="Replace 1st text" />
<input type="button" onclick="replace_text2('HELLO 2!');" value="Replace 2nd text" />
The script is here.

JavaScript getElementById not Working

I need help with this code if someone is willing to help. I cannot get the 2 getElementById functions to work and I am a beginner so I am sure it is something simple but I have not been able to fix it. I need to click on the text to change the font. Any help in the right direction will be greatly apprecited. Please check the code below.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Solution Page 486 Exercise 12.7</title>
<style type = "text/css">
.option { color: darkblue }
.graybg { background-color: #aaaaaa }
.whitebg { background-color: #ffffff }
.sans { font-family: sans-serif }
.serif { font-family: serif }
</style>
<script type = "text/javascript">
function bodyClass(color)
{
document.body.className = color;
}
</script>
</head>
<body>
<div id = "main">Click on Options Listed Below to see how they modify this page.<br ><br >
<div>Options:
<div onclick = "bodyClass('graybg');"
class = "option">Gray background</div>
<div onclick = "bodyClass('whitebg');"
class = "option">White background</div>
<div onclick = "document.getElementById(" class
= "option" classname ="sans" ? main?).>Sans-serif text</div>
<div onclick = "document.getElementById(" class
= "option" classname ="serif" ? main?).>Serif text</div></div></div>
</body>
</html>
The syntax of getElementById is:
document.getElementById('the_id_of_an_element')
You have:
document.getElementById(
You need to give it an argument and include the closing ). You then probably want to do something with the return value.
Do not write JavaScript in a string assigned to an 'onclick' property. Write it in a function in a tag and assign the function,here is the code:
<body>
...
<div id='an_id'> <!-- doesn't have to be a div, any element is OK -->
...
<script type='text/JavaScript'>
var some_elem = document.getElementById( 'an_id' );
some_elem.onclick = my_func; // no parens, no quotes!
function my_func() {
// your code goes here
// in here, 'this' refers to the element that got the click
}
</script>
</body>
Hope this will help.
document.getElementById itself says it fetch element by Id but not by class or any other attributes, this should work document.getElementById('main')
You didn't understand how getElementById works:
<html>
<head>
<script type="text/javascript">
function onButtonClick() {{
document.getElementById( "main" ).innerHTML = "html of div main has changed!";
};
</script>
</head>
<body>
<div id="main">This is the initial text</div>
<button onclick="onButtonClick();">Click me</button>
</body>
</html>
save the above code as "test.html", load it in a browser, click button, see effect.
<div id="main"> <= id="main" means that you give an identifier to the "div" element, when you call "document.getElementById", you need to pass the value of "id", in this case "main".

Is there a way to grab the current item id on mouse over in javascript?

I have a method in javascript and i'm trying to grab the id of an element on mouse over, is there a way to do this?
So say I have a method which takes no arguments
function noArgs() {}
and I have two paragraphs with the id of p1 and p2, how could I get the id of the hovered paragraph?
EDIT: This is currently how I'm grabbing the id's, which I want to eliminate the "element" argument in the method
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" href="js/jquery.js"></script>
<script type="text/javascript">
function hoverButton(element) {
var button = document.getElementById(element);
switch (button.state) {
case "up":
button.style.backgroundPosition = "top";
button.state = "down";
break;
default:
button.style.backgroundPosition = "bottom";
button.state = "up";
break;
}
}
</script>
<style type="text/css">
.button {
background-image: url("images/button.png");
width: 100px;
height 50px;
background-position: top;
border: none;
font-size: 18px;
}
</style>
</head>
<body>
<input type="submit" id="submit_button" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button')" onmouseout="hoverButton('submit_button')"/>
<input type="submit" id="submit_button2" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button2')" onmouseout="hoverButton('submit_button2')"/>
</body>
</html>
using jQuery:
$element.bind('mouseover', function() {
var id = $(this).attr('id');
});
Why do you want to eliminate the element argument?
In your scenario, you could do onmouseover="hoverButton(this)" and dispense with the var button = document.getElementById(element); line from your function. element would then be whichever element was being moused-over at the time, and you could get its ID (should you want it) by doing element.id.
However, as you've got a reference to jQuery in your code, you might as well use it ;)

Display a div using a javascript function

I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>

Categories