i want my para with id "fn_warn" to be visible when submit is clicked.
my html and js code is as,
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
First name
<input id="first_name" type="text"/>
<p id="fn_warn" style=" visibility: hidden; color: red;">#Please enter a valid name...</p>
<input class="button" onclick="tada();" type="submit" value="Submit" /> <input class="button" type="reset" />
</body>
</html>
<script>
function tada(){
var x= document.getElementById("fn_warn");
x.setAttribute("visibility","visible");
}
</script>
CSS rules are not attributes. Use the style property instead since the rule is inline:
function tada(){
var x = document.getElementById("fn_warn");
x.style.visibility = "visible";
}
Related
Why won't the code display the text from the textbook in the paragraph tag? I tried to take the code from the text box by using the onclick command and the function getVal() but it won't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="test.js">
function getVal1(){
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML=text
}
</script>
</head>
<body>
<form>
<input type="text" id="text">
<input type="submit" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
It cant work because you submit (which includes a reload) of the page.
Take a input type="button"instead.
function getVal1() {
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML = text
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type="text" id="text">
<input type="button" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
I am absolutely new to javascript. I am trying to create my first html page and add some javascript on my html tags. I want to have two boxes where I can input any number and click on Show me! in order to get the result. I wrote the code below but is doesn't do anything:
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result") == a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Any help with where I am wrong?
Many thanks in advance!
You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).
document.getElementById("result").value = a+b;
I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var val1 = document.getElementById("a").value.trim();
var val2 = document.getElementById("b").value.trim();
var a = parseFloat(val1 == ""? 0 : val1);
var b = parseFloat(val2 == ""? 0 : val2);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Well, it seems you merely forgot a little thing.
When reading the values of the a and b text boxes, you correctly used .value after retrieving the elements to access their value, but when you tried to set the value of result text box, you instead just compared it to the value of a+b. The == operator is for comparison, not setting a value.
Just as well, you will need to set the .value of the result text box, instead of the text box itself.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Hi I want to get the innerHTML of a div that contains input elements with input values.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" />
</div>
<p id="pid">
un texte.<input type="text" id="in" />
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
I want to get the inserted text in the inputs elements.
A piece of code can do the magic.
onblur='javascript:this.setAttribute("value",this.value)' value=""
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' />
</div>
<p id="pid">
un texte.<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' value=""/>
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
function afficher()
{
var t=document.getElementById('test').querySelectorAll("input");
console.log(t[0].value);
var t=document.getElementById('pid').querySelectorAll("input");
console.log(t[0].value);
}
<div id="test">
<input type="text"/>
</div>
<p id="pid">
un texte.<input type="text" />
</p>
<input type="submit" id="in" onclick="afficher();" />
Get div/p element using getElementById then use querySelectorAll to get input element. To get the value use input.value
Hi so yes this is a previous issue i have had, i have hit the books and whent back to basics adjusted a few things but im still having trouble getting the input value to push to the array can some one please help me get my head around this thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number=["1"]
function myFunction()
{
var x=document.getElementById("box");
number.push=document.getElementById("input").value;
x.innerHTML=number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
Here is the mistake:
number.push(document.getElementById("input").value);
push is a method, not an attribute ;-)
JSFiddle
PS: Why the ; after id="box"; ? You should fix that too..! ;-)
You were close, here's the working code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
i want to write the value in textbox under it,how can i do it?thanks in advance
i wrote this codes:
<html>
<head>
<script language="javascript">
function show (text){
document.write("text");
}
</script>
</head>
<body>
<input type=textbox name=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick=show(textbox.value)/>
</body>
</html>
first of all: document.write replaces document content, use window.alert or such
next, consider enclosing fields in the <form> and then use show(this.form.textbox.value)
thats besides other scripting errors :)
Modify your html like this:
<input type=textbox name=textbox value="Insert Name" id="txt" />
<span id="spn"></span>
<input type=button name=button value="OK" onclick="show();" />
And JavaScript like this:
function show(){
document.getElementById('spn').innerHTML = document.getElementById('txt').value;
}
Something like this should work: Working example
<html>
<head>
<script language="javascript">
function show (text){
document.getElementById("text").innerHTML = text;
}
</script>
</head>
<body>
<input type=textbox name=textbox id=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick="show(document.getElementById('textbox').value)"/>
<div id="text"></div>
</body>
</html>