I'm trying to modify the innerHTML of a particular div, but I cannot get to erase the content of that div. I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function reset() {
document.getElementById("results").innerHTML = "";
}
function check () {
document.getElementById("results").innerHTML = "foo";
}
</script>
<form name="form1">
<input type="button" value="Check" onclick="check();">
<input type="button" value="Reset" onclick="reset();">
</form>
<div id="results"></div>
</body>
</html>
Can anyone point out where I'm doing it wrong?
Thanks in advance.
That's because there's already a reset function in the form and this function is called instead of your own. Change that name and it will work.
<script type="text/javascript">
function r2() {
document.getElementById("results").innerHTML = "";
}
function check () {
document.getElementById("results").innerHTML = "foo";
}
</script>
<form name="form1">
<input type="button" value="Check" onclick="check();">
<input type="button" value="Reset" onclick="r2();">
</form>
<div id="results"></div>
Demonstration
This kind of problem is one more reason to avoid inline function calls. A preferred way would be
<form name="form1">
<input type="button" value="Check" id=check>
<input type="button" value="Reset" id=reset>
</form>
<div id="results"></div>
<script type="text/javascript">
document.getElementById("reset").onclick = function() {
document.getElementById("results").innerHTML = "";
}
document.getElementById("check").onclick = function(){
document.getElementById("results").innerHTML = "foo";
}
</script>
Give
onclick="window.reset();"
Related
After I click Begin(in form-input label) twice in a row, I run "Stop" and it doesn't work. why it doesn't work and how can i run "Stop" after I click Begin twice in a row successfully?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>test</title>
</head>
<script type="text/javascript">
var num=5;
function goBack()
{
window.history.back();
}
function clock(){
document.getElementById("xxx").value=num;
num=num-1;
}
var i=setInterval(clock,1000);
function Stop()
{
clearInterval(i);
}
function Begin()
{
i=setInterval(clock,1000);
}
</script>
<body>
welcome to test!
<form>
<input type="text" id="xxx" height="20px">
<input type="button" value="go back" onclick="goBack()">
<input type="button" value="bein" onclick="Begin()">
<input type="button" value="stop" onclick="Stop()">
</form>
</body>
Read inline comment below
var num=5;
function goBack()
{
window.history.back();
}
function clock(){
document.getElementById("xxx").value=num;
num=num-1;
}
var i=setInterval(clock,1000);
function Stop()
{
clearInterval(i);
}
function Begin()
{
//
//
// CLEAR interval each time you begin, obviously
clearInterval(i);
i=setInterval(clock,1000);
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>test</title>
</head>
<body>
welcome to test!
<form>
<input type="text" id="xxx" height="20px">
<input type="button" value="go back" onclick="goBack()">
<input type="button" value="bein" onclick="Begin()">
<input type="button" value="stop" onclick="Stop()">
</form>
</body>
You can a variable like I did to limit the number of time the function begin will run
var num=5;
var count=0;
function goBack()
{
window.history.back();
}
function clock(){
document.getElementById("xxx").value=num;
num=num-1;
}
var i;
function Stop()
{
clearInterval(i);
count=0;
}
function Begin()
{
if(count==0)
i=setInterval(clock,1000);
count++;
}
welcome to test!
<form>
<input type="text" id="xxx" height="20px">
<input type="button" value="go back" onclick="goBack()">
<input type="button" value="bein" onclick="Begin()">
<input type="button" value="stop" onclick="Stop()">
</form>
Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
i'm trying to create some kind of Desktop Keyboard (using/writing kyrillic letters in my text field). I came across the Problem that i can only write the first letter because of the assignment of the variable.
can someone tell me an easy way to get around that?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
This should solve your purpose :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard(button) {
var newtext = button.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this);"> <input type="button" name="B" value="B" onClick="rukeyboard(this);">
<input name="outputtext">
</form>
</body>
</html>
Here is a fiddle : https://jsfiddle.net/wet32n06/
Try this
function rukeyboard(newtext) {
document.Keyboard.outputtext.value += newtext;
}
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this.value);">
<input type="button" name="B" value="B" onClick="rukeyboard(this.value);">
<input name="outputtext" value="">
</form>
You can also try this solution.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
// var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += document.activeElement.value;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
But personally I will prefer using jquery to associate the functions, as there are lots of input tag and u have to manually call for each input tag.
So One good way will be using jquery.each to loop through all inputs, and bind the function using jquery on to the inputs.
Here is a solution using Jquery
HTML
<body>
<button value="A" name="A">A</button>
<button value="B" name="B">B</button>
<input id="outputtext" name="outputtext">
</body>
JQuery
<script>
$(document).on("click", "button", function() {
$("#outputtext").val($("#outputtext").val() + "" + this.value);
});
</script>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= document.getElemenetById('p1').value;
var p1=0;
p1=p+1;
p=p1;
}
</script>
In the productsphp.php page
<?php
if(isset($_POST['p1'])){
$p1=$_POST['p1'];
echo "p1 is".$p1;
}
?>
It is not working.
I want everytime the button is clicked to go the add1() function and increment it.So I can know how many clicks the user has clicked.Then when pressing save to save the number of clicks in the hidden value and then take the value and save it in the database.But the value is still nothing.please help
Your function name has a typo (getElemenetById, extra e) and you never resend the value to the input field. Try:
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= !parseInt(document.getElementById('p1').value) ? 0 : parseInt(document.getElementById('p1').value);
p++;
document.getElementById('p1').value = p;
}
</script>
You do not have to use another element at all, you could manipulate an attribute on your current element like data-clicks. It would look like this:
<button type="button" onclick="add1(this);" data-clicks="0">Add</button>
And the function will be:
function add1(element){
var currentClicks = element.getAttribute('data-clicks');
element.setAttribute('data-clicks', currentClicks + 1);
}
Reducing the DOM elements on your page improves performance, consider that.
Try this:
function add1(){
var p = document.getElementById('p1').value,
p1 = parseInt(p) + 1;
document.getElementById('p1').value = p1;
}
This way, you use the value of p1 after calculating it.
You should also need to set the initial value of p1:
<input type="hidden" id="p1" value="0" name="p1"/>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="text" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function add1(){
var p= document.getElementById('p1');
if(p.value) {
p.value = parseInt(p.value) +1;
}else {
p.value = 1;
}
}
</script>
Here is a 1-liner :D
function add1(){
document.getElementById("p1").value = Number(document.getElementById("p1").value) + 1
}
Note: Your clicks count could be cheated easily with this way. use ajax with jquery instead
You could use simple javascript
<script type="text/javascript">
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
count++;
//alert(count);
document.getElementById('p1').value=count;
}
</script>
Or Jquery
<script>
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
Here is complete html file
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
//use one at a time. This is just a demonstration how to do this in both
//jquery and javascript
/* Javascript way of doing this -
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
i++;
document.getElementById('p1').value=i;
}
*/
/* JQuery way of doing this*/
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
</body>
</html>
I am making this program where the value in the text-box will be alerted. I know this is hardly anything, but already something isn't working. I checked the developer tools console panel and it didn't show any errors.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submit = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit()">Submit</button>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var submit1 = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit1()">Submit</button>
</form>
</body>
</html>
That is because there's already be a function named submit(). Change it to submit1() or any other name . It'll work
submit() is a predefined method in JavaScript that is used to submit the form.
So you can't use it like that. You need to change the function name to something else.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submitForm = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submitForm()">Submit</button>
</form>
</body>
</html>
var test= function() {
var name = document.getElementById('name').value;
alert(name);
}
<input type="text" id='name'>
<button type="button" onclick="test()">Submit</button>