i am a beginer to javascript.I want to show a hidden textbox on a button click.i do the bellow code, but it doesnt work.
What is the problem with my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function display() {
var z = prompt("enter your name...");
if(z != null) {
document.getElementById("demo").innerHTML = "thankyou " + z + "..";
document.getElementById("case").style.visibility = 'visible';
} else {
document.getElementById("demo").innerHTML = "thankyou";
}
}
</script>
<title></title>
</head>
<body>
<p id="demo">
click on the button.....
</p><button type="button" onclick="display()">submit</button>
<form>
<input type="text" id="case" name="myText" style="display:none">
</form>
</body>
</html>
replace
document.getElementById("case").style.visibility='visible';
with
document.getElementById("case").style.display='block';
Change the style as display block instead of visibility,
document.getElementById("case").style.display='block';
or have your text box as visibility hidden instead of display:none
<input type="text" name=<name> style="visibility:hidden"/>
The following two statements will display the element with id "case":
document.getElementById("case").style.display='block';
or
document.getElementById("case").style.display='';
The following statement will hide the element with id "case":
document.getElementById("case").style.display='none';
Display:none works fine with HTML to hide a button
Related
I have an html markup like this.
<html>
<head></head>
<body>
<input type="checkbox" id="Randomly generated ID" onclick="fun()">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>
On clicking the checkbox i want to add a css style to label tag using fun() function in javascript.
I am having trouble in doing so, plus both the elements have a randomly generated ID and cannot have same ID's.
Here is the implementation using Vanilla Js.
function fun(inputElement) {
var backgroundColor = inputElement.checked ? 'yellow' : 'white';
var labelSelector = 'label[for="' + inputElement.id + '"]';
var labelElement = document.querySelector(labelSelector);
inputElement.style.background = backgroundColor;
labelElement.style.background = backgroundColor;
}
<html>
<head></head>
<body>
<input type="checkbox" id="CHECKBOX_ID" onclick="fun(this)">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>
Hope this will help you, thanks.
You can get the specific clicked input element and apply css style on it
Here's a simple example using jQuery:
$('input[type="checkbox"]').on('click', function(){
$(this).toggleClass('fun-class');
});
when I run this the "You entered: insert text here" appears for a second and then disappears and the text box clears on its own. I spent 3 hours and I can't see where I'm making my mistake. Any help is appreciated! Thanks.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
document.write("You entered: " + firstWord);
}
</script>
</head>
<body>
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
</form>
</body>
</html>
Don't use document.write() as it is dangerous. Create a separate element with its own id and use innerHTML:
function Copier() {
document.getElementById("output").innerHTML = "You entered: " + document.getElementById("Word1").value;
}
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<p id="output"></p>
</form>
You don't need the form tag.
In case you are using a form tag around your input, the browser assumes that there should be a method defined like:
<form action="post/get" url="some-file.php">
As soon as your JavaScript has grabbed the input, it get's flushed out by the form (re)action, which is pointing to no file specified.
Just leave the form tag and grab the value by the input field itself.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<style>
input[type="text"] {
border: 1px solid #565656;
padding: 2px;
color: black;
}
#display {
position: relative;
top: 0;
width: 300px;
height: 30px;
}
</style>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
var box = document.getElementById('display');
box.innerHTML = "You entered:" + firstWord;
}
</script>
</head>
<body>
Word Number 1:
<input type="text" id="Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<div id="display"></div>
</body>
</html>
Using what user 'user2521387' said about the form tag. You should drop the form tag, and if you don't want to use innerHTML you could do something like this:
function Copier() {
var firstWord = document.getElementById("Word1").value;
var box = document.getElementById('display');
//clear all childs of div with id 'display'
while (box.firstChild) { // whilte first child is valid
box.removeChild(box.firstChild); // removes first child
}
var p = document.createElement("p"); //create p tag
p.appendChild(document.createTextNode("You entered:" + firstWord));
box.appendChild(p); //add p tag to div
}
it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);
I was working on a project that I need a hidden input field to take user input.
I have javascript in place to focus always on the input field. When the div is visible I can see typing. When I hide the div type and make the div visible again I do not see any change. How can I make it so when the div is hidden, it will still take user input? Really, if there is another way besides hiding, that would be great.
<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
function change() {
var div = document.getElementById('diva');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
geta.focus();
// -->
</script>
</body>
</html>
Fixed copy using Jeffman's idea:
<html>
<head>
<style>
input {
position: absolute;
left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
function hide() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '-999em';
}
function show() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '10em';
}
geta.focus();
// -->
</script>
</body>
</html>
Are you just trying to make it so any user input is captured to a hidden input field?
If so you can add a onkeyup trigger to the document, and for every keyup, modify the hidden input field.
Otherwise, once you have hidden an element it would loses focus.
Simple example:
I don't know if you are using jQuery, so here is a very native, simple solution, put in your head tag
document.onkeyup = function(e) {
var input = document.getElementById('myinput');
if (input.style.display == 'none') {
input.value += String.fromCharCode(e.keyCode || e.which);
}
};
I don't think it's possible to type in a text field when it's hidden. What is your use case?
Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.