JavaScript - Toggle CSS colors with plain JavaScript? - javascript

I'm trying to change the colors of a form text field back and forth, using plain javascript. Can somebody help?
I can change the color once but not back
Here is what I have done
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
function color() {
var x = document.getElementById("currID");
if(x.style.color="red") {
x.style.color="blue";
}
}
}
</script>
<input type="button" value="Click Me" id="testButton" onclick="color()" />
<form method="get" action="getresult.php">
<p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
<p><input type="submit" value="Request new ID"/></p>
</form>
</body>
</html>
CSS
<style type="text/css">
.main {
color:black;
}
.a {
color:red;
}
</style>

Try this:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
function color() {
var x = document.getElementById("currID");
if(x.className == "main"){
x.className = "a";
} else {
x.className = "main";
}
}
</script>
<input type="button" value="Click Me" id="testButton" onclick="color()" />
<form method="get" action="getresult.php">
<p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
<p><input type="submit" value="Request new ID"/></p>
</form>
</body>
</html>
CSS:
<style type="text/css">
.main {
color:black;
}
.a {
color:red;
}
</style>
Demo: https://jsfiddle.net/a5rxoh03/

Specifically to your issue, and why it didn't work, is because when adding a 2nd IF, you just reveresed the result.
Check out this fiddle, it will change the input field of the "currID" as requested from blue to red and vice verca.
https://jsfiddle.net/0rnnqe3y/
This is the JS :
function color() {
var x = document.getElementById("currID");
console.log(x.style.color == "red");
if(x.style.color=="red") {
x.style.color="blue";
return;
};
if(x.style.color=="blue"){
x.style.color="red";
return;
}
}

Related

show div when form file upload browse button is clicked or when a file is selected and input?

i am trying to show a div only when the user selects and image by clicking the file upload browse button. can someone please show me where i am going wrong and how to get this to work, i am using this html code:
<input type="file" name="pic" accept="image/*" onClick="showSubmit(this);"/>
my js code:
<script>
function showSubmit(submit) {
document.getElementById("submit").style.display = submit.checked ? "block" : "none";
}
</script>
my div html:
<div id="submit">
<div id="content2">
<input type="submit" value="Submit">
</form>
</div>
</div>
my div css:
#submit{
display:none;
}
Try This :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.submitClass {
display: none;
}
.displaySubmit{
display:block;
height:20px;
text-align:center;
padding:2px;
}
</style>
<script type="text/javascript">
function showSubmit(submit) {
document.getElementById("submit").className = "displaysubmit";
}
</script>
</head>
<body>
<input type="file" name="pic" accept="image/*" onclick="showSubmit(this);" />
<div id="submit" class="submitClass">
<div id="content2">
<input type="submit" value="Submit">
</div>
</div>
</body>
</html>
In case you're using jQuery:
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});
If you're using pure javascript, just use the onchange event of your input field.

Change script for radio buttons to regular buttons

So I have this script that I've been using that works nicely for an my purposes but it is built with radio buttons, and I've been asked to do another project with it, but my boss would like the buttons to now be regular, non-radio buttons.
Here is the code I've been using so far. It's a lot harder to change over radio-button code to regular button code than I thought! Any help would be very much appreciated, thanks!
<!DOCTYPE html>
<html>
<head>
<style>
#TFholder{
background-image:url('truefalse.png');
height:84px;
width:576px;
}
button{
height:84px;
width:280px;
color:white;
background-color:black;
margin-top:50px;
text-align:center;
line-height:10px;
border:none;
outline:none;}
button a{
display:block;
color:white;
text-decoration:none;
padding:20px 40px;}
</style>
</head>
<body>
<script type="text/javascript">
function onCheck() {
if (document.getElementById('check1').checked) {
document.getElementById('truebox').style.display = 'block';
}
else document.getElementById('falsebox').style.display = 'block';
}
</script>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check1"><br>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check2"><br>
<div id="TFholder">
<div id="truebox" style="display:none">
<button type="button">CONTINUE!!!</a></div>
</div>
<div id="falsebox" style="display:none">
<button type="button">SECOND BUTTON!!!</a></div>
</div>
</div>
</body>
</html>
change HTML part to:
<input id="Button1" type="button" value="button" onclick="javascript:b1();"/><br />
<br />
<input id="Button2" type="button" value="button" onclick="javascript:b2();"/><br>
change Script part to:
<script type="text/javascript">
function b1() {
document.getElementById('truebox').style.display = 'block';
}
function b2() {
document.getElementById('falsebox').style.display = 'block';
}
</script>

Text Alignment Issue in IE9

I have a input field and it has some text in it. On click of a button I want to change the text-align to center, left and right.
It works in every browser but not in IE9.
<!DOCTYPE html>
<html>
<head>
<title> Test for Text Align</title>
<meta charset = "UTF-8" />
<style type="text/css">
#testBox{
text-align: left;
}
</style>
</head>
<div>
<input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
</div>
<div>
<input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
<input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
<input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
</div>
<script type="text/javascript">
function testFunction(el){
var testTextBox = document.getElementById("testBox");
if(el == "centeralign"){
testTextBox.style.textAlign = "center";
}else if (el == "leftalign") {
testTextBox.style.textAlign = "left";
}else if (el == "rightalign") {
testTextBox.style.textAlign = "right";
}
}
</script>
</html>
This is an odd bug in IE (at least some versions of it). It seems that the input box rendering is not updated when its style is changed via an event handler attribute. It seems to help to add the following after the definition of testTextBox:
testTextBox.value += '';
This does not modify the value, since it appends an empty string, but it seems to be sufficient for waking up IE so that it renders the input box with the changed style.
If u have still not got it solved u can get the below code works in ie9 tested js code as ur wish ..
<!DOCTYPE html>
<html>
<head>
<title> Test for Text Align</title>
<meta charset = "UTF-8" />
<style type="text/css">
#testBox{
text-align: left;
}
</style>
</head>
<body>
<div>
<input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
</div>
<div>
<input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
<input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
<input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
</div>
<script type="text/javascript">
function testFunction(el){
var testTextBox = document.getElementById("testBox");
if(el == "centeralign"){
testTextBox.style.textAlign = "center";
}else if (el == "leftalign") {
testTextBox.style.textAlign = "left";
}else if (el == "rightalign") {
testTextBox.style.textAlign = "right";
}
}
</script>
</body>
</html>

HTML Window Refresh Top of Page

Everytime the page refreshes it goes to top of page, I would like it to stay where it is, I'm pretty sure it has something to do with function move() {window.location = window.location.href}. Heres the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="refresh" content="83">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>[DashboardDescrip]</title>
<style type="text/css">
body
{
background-image:
url('../Images/Black-BackGround.gif');
background-repeat: repeat
}
</style>
</head>
<script type="text/javascript">
var time = null
function move() { window.location = window.location.href }
Well you are not actually refreshing the page.. You are redirecting it to the same page.. To refresh use:
location.reload();
http://www.w3schools.com/jsref/met_loc_reload.asp
This might still not solve your problem.. and you'll have to look for some script.. Are you using asp.net?
Perhaps the following code would work for you? Source
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script>
function SaveScrollXY() {
document.Form1.ScrollX.value = document.body.scrollLeft;
document.Form1.ScrollY.value = document.body.scrollTop;
}
function ResetScrollPosition() {
var hidx, hidy;
hidx = document.Form1.ScrollX;
hidy = document.Form1.ScrollY;
if (typeof hidx != 'undefined' && typeof hidy != 'undefined') {
window.scrollTo(hidx.value, hidy.value);
}
}
</script>
</HEAD>
<BODY onload="ResetScrollPosition()">
<form name="Form1" id="Form1" method="post"
onsubmit="SaveScrollXY()" action="index.php">
<input name="ScrollX" id="ScrollX" type="hidden"
value="<?php echo $_REQUEST['ScrollX'] ?>" />
<input name="ScrollY" id="ScrollY" type="hidden"
value="<?php echo $_REQUEST['ScrollY'] ?>" />
<p>This is just a paragraph to make a very long page.</p>
…
<P>This is just a paragraph to make a very long page.</P>
<P>
<input name="TextBox1" type="text"
value="<?php $v = $_REQUEST['TextBox1']; echo $v ? $v + 1 : 1 ?>"
readonly="readonly" id="TextBox1" /></P>
<P>
<input type="submit" name="Button1" value="Post Form"
id="Button1" /></P>
</form>
</BODY>
</HTML>
Shawn313131 came up with this answer for me so credit to him not me!!!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url('../Images/Black-BackGround.gif');
background-repeat: repeat;
}
body td {
font-Family: Arial;
font-size: 12px;
}
#Nav a {
position:relative;
display:block;
text-decoration: none;
color:black;
}
</style>
<script type="text/javascript">
function refreshPage () {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
window.onload = function () {
setTimeout(refreshPage, 35000);
if (window.location.href.indexOf('page_y') != -1 ) {
var match = window.location.href.split('?')[1].split("&")[0].split("=");
document.getElementsByTagName("body")[0].scrollTop = match[1];
}
}
</script>
</head>
<body>
I believe you are looking for something like this:
var pos = $(window).scrollTop();
..// Some Code Later, or after page refresh & retrieving the value from a cookie
$(window).scrollTop(pos);

Canvas trouble changing color/clearing canvas on button click

My code is using a canvas that allows people to draw whatever they want, what I'm trying to implement is changing the color of what their coloring on button click, default color is black I have two buttons to change ot red and green and also a clear canvas button, none of these seems to operate on button click however.
<h3>Draw Something</h3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paint Canvas</title>
<style type="text/css">
<!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
-->
</style>
</head>
<body>
<div id="container">
<canvas id="imageView" width="600" height="300">
</p>
</canvas>
</div>
<script type="text/javascript" src=".js"></script>
</html>
<body >
<input type= "button" value= "Green" id= "green" onclick= "GreenRect()" />
<input type= "button" value= "Red" id= "red" onclick= "RedRect()" />
<input type= "button" value= "clear canvas"
id= "clear" onclick= "ImgClr()" />
<button id="howdy">Howdy!</button><br>
</body>
function GreenRect () {
context.strokeStyle= 'green';
context.stroke();
}
function RedRect () {
context.strokeStyle= 'red';
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, 600, 300);
}
</script>
You did have a lot of mis-formed html, like a second <body> tag as well as a </html> half way through your code, either of which would have completely confused a browser as you can see by Firefox's noble attempt to make sense of your code:
<html lang="en"><head></head><body><h3>Draw Something</h3>
<meta charset="utf-8">
<title>Paint Canvas</title>
<style type="text/css">
<!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
-->
</style>
<div id="container">
<canvas id="imageView" width="600" height="300">
<p></p>
</canvas>
</div>
<script type="text/javascript" src=".js"></script>
<input type="button" value="Green" id="green" onclick="GreenRect()">
<input type="button" value="Red" id="red" onclick="RedRect()">
<input type="button" value="clear canvas" id="clear" onclick="ImgClr()">
<button id="howdy">Howdy!</button><br>
function GreenRect () {
context.strokeStyle= 'green';
context.stroke();
}
function RedRect () {
context.strokeStyle= 'red';
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, 600, 300);
}
</body></html>
Also there is:
an <h3> tag outside of your <body> tag
your javascript at the bottom of your original code is outside of the <body> and <head> tags as well as lacking an opening <script> tag.
<p></p> tags within your canvas tags that don't seem to be doing anything.
I'd strongly recommend not looking at my code below, but first just trying to clean up your html according to the comments I've made about it. I think you would get a lot out of doing that for yourself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paint Canvas</title>
<script type="text/javascript">
//declare global namespace
this.DGN = {
prep: undefined,
context: undefined,
greenRect: undefined,
redRect: undefined,
imgClear: undefined,
smileyFace: undefined
};
DGN.prep = function(){
if(typeof DGN.context === "undefined") {
var canvas = document.getElementById('imageView');
if (canvas.getContext){
DGN.context = canvas.getContext('2d');
}
}
};
DGN.greenRect = function () {
DGN.prep();
DGN.context.strokeStyle = 'green';
DGN.context.stroke();
};
DGN.redRect = function () {
DGN.prep();
DGN.context.strokeStyle = 'red';
DGN.context.stroke();
};
DGN.imgClear = function () {
DGN.prep();
DGN.context.clearRect(0, 0, 600, 300);
};
DGN.smileyFace = function () {
DGN.prep();
console.log(DGN.context);
DGN.context.beginPath();
DGN.context.arc(75,75,50,0,Math.PI*2,true); // Outer circle
DGN.context.moveTo(110,75);
DGN.context.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
DGN.context.moveTo(65,65);
DGN.context.arc(60,65,5,0,Math.PI*2,true); // Left eye
DGN.context.moveTo(95,65);
DGN.context.arc(90,65,5,0,Math.PI*2,true); // Right eye
DGN.context.stroke();
};
</script>
</head>
<body>
<h3>Draw Something</h3>
<div id="container">
<canvas id="imageView" width="600" height="300">
</canvas>
</div>
<input type="button" value="Green" id="green" onclick= "DGN.greenRect()" />
<input type="button" value="Red" id="red" onclick= "DGN.redRect()" />
<input type="button" value="clear canvas" id="clear" onclick= "DGN.imgClear()" />
<input type="button" value="Smiley Face" id="smileyFace" onclick= "DGN.smileyFace()" />
</body>
</html>

Categories