<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dark {
background-color: black;
}
</style>
</head>
<body>
<input type="button" onclick="document.body.className='dark'" value="dark" />
<input type="button" onclick="document.body.className=''" value="reset" />
</body>
</html>
I have two buttons and two effects.
The button is reduced to one
If the background is black, the button name is reset,
How do I make the button name dark when the background is white?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clickme ()
{
if(document.body.style.background =='black')
{
document.body.style.background='white';
document.getElementById("button").value="dark";
}
else
{
document.body.style.background='black';
document.getElementById("button").value="reset";
}
}
</script>
</head>
<body >
<input type="button" id="button" onclick="clickme()" value="dark" />
</body>
</html>
I think that's what you are looking for:
document.querySelectorAll('.dark')[0].style.backgroundColor == 'white' ? document.querySelectorAll('.dark')[0].style.color = black;
I would suggest downloading and using jQuery so your code is cross browser compliant and it's easier to perform whatever you want to do. That said, below is your code updated to work.
<input type="button" onclick="document.querySelector('body.dark') ? document.body.className='' : document.body.className='dark';" value="toggledark" />
Heres what i think you mean, i set up a button that on click changes the body to the background colour of the text showing on the button once clicked.
Its created in jQuery.
Here's a link to a live demo
Heres the html
<button class = 'button' > dark </div>
Heres the jQuery
$('.button').click(function() {
if ($(this).text() == 'dark') {
$(this).text('white');
$('body').addClass('dark');
$('body').removeClass('white');
} else {
$(this).text('dark');
$('body').addClass('white');
$('body').removeClass('dark');
}
});
Related
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
I am working on something, and I don't have any codes for now, because I have no idea how to do this! Please help me out here :D
What I think would be nice is if I could make a password that changes my style:
<html>
<head>
<style>
.passwordProtected {
display:none; <- this is supposed to change to "block" when the password is written in, and they click "Show div"
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password"> <--- This is where they type the password
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
</body>
</html>
What do I do?
If I'm understanding you right, the code would look something like this:
<html>
<head>
<style>
.passwordProtected {
display:none;
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password">
<button onclick='showDiv();'>Show div</button>
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
<script type="text/javascript">
function showDiv(){
var myDiv = document.querySelector('.passwordProtected');
myDiv.style.display = 'block';
}
</script>
</body>
</html>
You can find out more about styling with JavaScript here: http://www.w3schools.com/jsref/dom_obj_style.asp.
Trigger the image when i click submt button and in current active tab
<form name="myform" onsubmit="return onsubmitform();">
<input type="submit" name="operation" onclick="document.pressed=this.value" value="GetCATHY"/>
</form>
<script type="text/javascript">
function onsubmitform()
{
if(document.pressed=='GetCATHY')
{
document.pressed.action="img src=a.jpg";
}
}
You can easily do this using jQuery.
However this is pretty simple stuff so I suggest doing a bit of reading and practice on basic html.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#hidden").show();
});
});
</script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<form><input type="submit" id="submit"></form>
<div id="hidden" class="hidden">IMAGE</div>
</body>
</html>
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I want to make a page with riddles and after every riddle an answer button and onclick shows the answer but also changes the value of the button into hide so when you press again the button you hide the answer. I made something but I'm a beginner in Javascript so I can't figure out what I did wrong:HERE
html:
<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>
css:
#click{
display:none;}
js:
$(document).ready(function(){
$(window).change(function(){
if (el.value == "Answer" ){
$("p#click").removeClass("click");
el.value = "Hide";
} else if ( el.value = "Hide";) {
$("p#click").addClass("click");
}
});
});
I want to be something like this: Demo but 1 single button which can change its value and change from answer to hide and from hide to answer.
Here is the updated Demo
jQuery
$(document).ready(function(){
$("#show").click(function(){
if ($(this).text() == "Show")
$(this).text("Hide")
else
$(this).text("Show");
$("span").slideToggle();
});
});
This is the working code for you :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#click").slideToggle();
if($("#show").val() == 'Show') {
$("#show").val('Hide');
}else {
$("#show").val('Show');
}
});
});
</script>
<style>
#click{
display:none;}
</style>
</head>
<body>
<input type="button" value="Show" id="show" />
<p id="click">This is the riddle answer.</p>
</body>
</html>