I am trying to get the user to put something into the text area and the output should be what he wrote repeapiting x amount of times, but I get an error "document.forme is undefined".
Can you please help me understand why it is undefined?
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input home work</title>
<script type="text/javascript">
var help= document.forme.tryout.value;
for (x=1; x<=10;x++){
function numberCheak (){
document.write("this is"+" "+help++);
}
}
</script>
</head>
<body>
<form name="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onClick="numberCheak();"/>
</form>
</body>
</html>
Ok, you have a few problems. The first is that you are trying to access a form element that doesn't exist yet: the script is above the form element, so the form doesn't exist when you try to get it. If you move the script to the bottom of the page it will work better.
Second, the loop should be inside the function, not wrapped around the function.
Third, document.write has weird side effects and causes the document to be rewritten and will stop the script from continuing correctly.
Here's my revised script
function numberCheak() {
var help = document.forme.tryout.value;
for (var x = 1; x <= 10; x++) {
document.getElementById("output").innerHTML += help;
}
}
and the HTML form that goes with it
<form name="forme" id="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onclick="numberCheak();" />
<span id="output"></span>
</form>
You can see it in action on jsFiddle.
Forms are stored in collection and can be accessed like this:
var form = document.forms[i];
or
var form = document.forms[name];
In your case, i is 0 and name is forme.
Related
So I am testing the permute function of D3.js and it works just fine.
The issue I am having is to display the results on the same page using innerHTML, it always reloads in order to display.
I am probably missing a detail here, can someone help?
permute.html:
<html>
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function* permute(keys) {
var size = keys.length,
c = Array(size).fill(0),
i = 1;
yield keys;
while (i < size) {
if (c[i] < i) {
var k = i % 2 && c[i];
[keys[i], keys[k]] = [keys[k], keys[i]];
c[i]++;
i = 1;
yield keys;
} else {
c[i++] = 0;
}
}
}
function showPermutations(){
var input = document.getElementById("keys").value;
document.getElementById('results').innerHTML=input;
for (var words of permute(input.split(/\s+/))) {
document.write(words.join(''));
document.write("<br>");
}
}
</script>
<body>
<form>
<label><b>Keywords</b></label></br>
<input type="text" id="keys" name="keys"></br>
</form>
</br>
<input type="submit" value="Permute" onclick="showPermutations();"></br>
<p><span id='results'></span></p>
</head>
</body>
</html>
Some of you pointed out the issue is caused by the submit button, but in this other example, using submit, the JS works just fine on the same page:
test.html
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
When you click the submit button, the page will automatically reload. You should prevent that by calling the preventDefault method of the event object that is passed to the event handler, in your case, that handler would be showPermutations.
Make that function receive one argument, called e, ev, or event (as it is normally called) and inside it, execute the preventDefault method before anything else.
function showPermutations(e){
e.preventDefault();
...
}
Or don't use a submit button.
I am currently learning to use the replace method in JS. I was able to get it to work in a simple function using the console to check the output. However I am now working on making a simple user interface to interact with the function and it has caused some difficulty. I can get the function to accept and re-print the user's text, but the replace portion doesn't seem to be functioning properly as I've written it. Here is the HTML:
<!DOCTYPE html>
<!-- Create a function grabText that replaces the char - with _ -->
<html lang="en">
<meta charset="utf-8">
<head>
<title>HMTL Template</title>
</head>
<body>
<input type="text" id="inputField"
placeholder="Input Text"/>
<button id="clickButton" onclick="grabText();">Run</button>
<p id="outputText"></p>
</body>
</html>
And here is the JS:
var inputText;
function grabText () {
inputText = document.querySelector("#inputField");
document.getElementById("outputText").innerHTML = inputText.value;
inputText.value.replace(/-/g , "_");
document.getElementById("outputText").innerHTML = inputText.value;
}
I suspect there is an issue with where and how I am using .value . Thanks for any help.
keep in mind replace returns a new string, it doesn't change the existing one.
var inputText;
function grabText() {
inputText = document.querySelector("#inputField");
document.getElementById("outputText").innerHTML = inputText.value.replace(/-/g, "_");
}
<input type="text" id="inputField" placeholder="Input Text" />
<button id="clickButton" onclick="grabText();">Run</button>
<p id="outputText"></p>
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
So this should be changing the page so that when they click the button it shows a total of everything they have selected in the form, but it is not doing anything. It seems that it is not even running the script at all, and I have no idea what is up.
...more form stuff up here
<button type="button" onclick="total(this.form)">Get my Total</button>
<p id="subtotal"></p>
<input type="submit">
</form>
<script>
function total(form)
{
var SynCr= form.Synth.value;
document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth");
}
</script>
Your problem is onclick="total(this.form)". When the handler is called this refers to the button, which does not have a form as a member.
Try instead:
onclick="total(document.getElementById('formId'))"
First of all:
this.form does not return the parent form.
Second: you have a syntax error in: document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth"); the last ) should not be there.
The following is sinppet of code shows you in some what how to debug your code and it works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form id="hgg">
<input type="text" name="Synth" value="" />
<button type="button" onclick="total(this)">Get my Total</button>
</form>
<div id="subtotal">
<p>5518</p>
</div>
<script>
function total(button)
{
form1 = button.parentNode;
alert(form1.Synth.value)
/*alert(p.id)
alert("555");*/
SynCr= form1.Synth.value;
alert(SynCr)
k = document.getElementById("subtotal");
k.innerHTML = "You have ordered: <br>"+SynCr+"Synth";
}
</script>
</body>
</html>
Look at this online demo: http://jsbin.com/voruzumi/1/
I want to create a TextField in which when I give any input it show on div and this script is showing inputs but not properly...
I don't know where I am making mistakes and I request that please give your answers only in JavaScript please don't use jquery. Thank you .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="form">
<input name="t" value="" onkeypress="printvalues();">
</form>
<div id="divId"></div>
</body>
</html>
script
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += form.t.value;
}
Here is my code with output
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML = document.form.t.value;
}
EDIT:The keypress event executes before the value of textbox is changed so use keyup() event which triggers when the key is released instead like
<input name="t" value="" onkeyup="printvalues();">
Your solution is here....
Just change onkeypress to onkeyup
Made below changes and enjoy..
function printvalues(a) {
var div = document.getElementById("divId");
div.innerHTML=a;
}
<input type="text" name="t" onkeyup="printvalues(this.value);">