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>
Related
I am making a calculator and want a specific value to be assigned depending on if the checkbox is checked or not, the code I have might work however everytime I click the "Calculate" button it automatically checks the checkbox even if it wasn't checked in the first place. How would I fix this?
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked = true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
You have a typo in tek.js
Since you are assigning true to checkbox.checked , it sets the checkbox (similar to checking the checkbox) and 5 is evaluated based on your logic.
You may want to set checkbox.checked == true to get desired output.
I updated your code now. It's working as expected. Due to your if condition, your checkbox got selected.
i replaced if (checkbox.checked = true) with if (checkbox.checked == true). It is now working.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked == true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
</script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
</body>
</html>
Whenever I type into the <input /> element of my HTML, everything disappears. I din't see any problem or error on my JavaScript console, and when I inspect the page, the code seems to disappear as well.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Coding stuff</title>
</head>
<body>
<input type="text" id="myInput" onkeydown="write()" />
<p id="myDiv" style="width: window.innerWidth;" style="color: green;"></p>
<script>
function write() {
document.getElementById("myDiv").innerHTML += Math.floor(Math.random()*2) + " ";
document.getElementById("myInput").value = "";
}
</script>
</body>
</html>
Does anyone know why this is happening? Thanks
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</body>
</html>
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;
}
}
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);