In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!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=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`
Related
I have written the below mentioned javascript and have called on the button click event but somehow it doesn't work, please someone help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function f1()
{
var x=document.getElementById("txt1").innerHTML
if(x==1)
{
alert("hello");
}
}
</script>
<body>
<form id="form1">
<input type="text" id="txt1"/><br/>
<input type="button" id="btn1" value="submit" onclick="f1()"/>
</form>
</body>
</html>
You're trying to grab innerHTML from an input field when you should be grabbing the value otherwise it'll always be undefined:
Change:
var x = document.getElementById("txt1").innerHTML;
to:
var x = document.getElementById("txt1").value;
JSFiddle Example
http://jsfiddle.net/moogs/dNWNP/1/
It should not be .innerHTML, but .value.
You should use value instead of innerHTML:
var x=document.getElementById("txt1").value;
See the jsfiddle.
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!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>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try this
<!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>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)
I am working on a clipboard functionality...
I am facing mouse-events issues... In below code, when I remove label tag and style="display:none" class="hide" , my clipboard functionality is working, but clipboard functionality is not working..
Please kindly check below code: what changes I need to make so that it works perfectly?
<!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>
<title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
<link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('texter');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var clip = new ZeroClipboard.Client();
clip.setText('');
jQuery('#copy-button').click(function(){
clip.setText(jQuery('#texter').val());
});
});
$(document).ready(function () {
var clip = new ZeroClipboard.Client();
clip.setText(''); // will be set later on mouseDown
clip.addEventListener('mouseDown', function (client) {
// set text to copy here
clip.setText(jQuery('#texter').val());
// alert("mouse down");
});
clip.glue('copy-button');
});
</script>
</head>
<body>
<label onmouseover="myfunc2()">Click here</label>
<textarea name="texter" id="texter" style="display:none" class="hide" readonly>sdfdsfsdfgdfdfg</textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />
</body>
</html>
I am trying to get this to be if your name is Bob then you are register if not Sorry you are not allowed access but i can not figure out what I am doing wrong can someone help me thanks.
<!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></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (firstName=="Bob") {
alert("Now registered");
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="BOB">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
<!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></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
var firstName = document.getElementById('firstName').value;
if (firstName=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
} }
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
you have to use onsubmit on form tag and it must return true or false
Note that you are missing the closing braces for the function, this code works:
<!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></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify()
{
var name="Please enter your name: ";
if (myForm.firstName.value=="Bob")
{
alert("Now registered");
}
else
{
alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name=firstName>First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
This should work.
<!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></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
function verify() {
var firstName = document.getElementById('firstName').value;
if (firstName == "Bob") {
alert("Now registered");
return true;
} else {
window.alert("Sorry you aren't allowed access.");
return false;
}
}
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Update your javascript like so:
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (document.myForm.firstName.value=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
Then update your HTML form to this:
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="firstName" value="">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
your onsubmit should be on the form handler (the open tag of the "form"), not on the button.
Several issues:
You don't have a javascript variable firstName anywhere. The script probably stops there.
Your form markup for the first name field is strange (why are you naming the text box "BOB"? You should give it an ID.
You need to access the form element in javascript properly.
When submitting a form, it is better to use a submit input type and hookup the form onsubmit (in this regard the answer by #Pravat is correct, though not on the other points).
This line does nothing - var name="Please enter your name: ";
Firstly the Javascript does not know what firstname is
To fix this you need to do two things:
Use the HTML <input name="BOB" id="firstName" value="" />. Note the id attribute, we'll use this to let the JS find the element we want to examine.
Then in Javascript we can find what the user has entered in the input using document.getElementById('firstName').value.
This should let you do your comparison.
To fix minor parts of your code, I believe you forgot to open your <body> tag
your also missing a } for your function
self-close your input and br tags
Try to use:
var firstName = document.getElementById('firstName').value;
and put missing } for verify function
see this..., you also have a } missing... just before the < /script> ... the missing } is the one that closes the verify function.
problem in javascript validation , how to make call to javascript ?
<!DOCTYPE html>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<html>
<head>
<script type="text/javascript">
alert('1');
function validate()
{
alert('inside function');
var str1;
// str1 = document.getElementById('name').value;
//alert(str1);
}
</script>
</head>
<body>
<ice:panelGrid columns="1" width="760px" styleClass="contentPanel">
<ice:panelGroup>
<ice:outputText value="Name"></ice:outputText>
<ice:inputText value="" id="name" ></ice:inputText>
<ice:commandButton onclick="validate();"></ice:commandButton>
</ice:panelGroup>
</ice:panelGrid>
</body>
</html>
I am not able to access the javascript.Getting error as validate not defined.
Looks like your <script> tag is not closed. Does it render at all?
I know nothing about that icesoft stuff. Are you sure it supports "onclick=" at all?
HTML-wise, it looks ok.
A quick example without the <ice:*> stuff:
<!DOCTYPE html>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<html>
<head>
<script type="text/javascript">
alert('1');
function validate()
{
alert('inside function');
var str1;
}
</script>
</head>
<body>
<form>
<input type=submit onclick="validate();">
</form>
</body>
</html>
works fine for me.
Your code seems correct, except that you have to nest all your inputText and commandButton components in a form:
<body>
<f:form>
<ice:panelGrid columns="1" width="760px" styleClass="contentPanel">
<ice:panelGroup>
<ice:outputText value="Name"/>
<ice:inputText value="" id="name"/>
<ice:commandButton onclick="validate();"/>
</ice:panelGroup>
</ice:panelGrid>
</f:form>
</body>