I do not know if my code even works because i cant get past the onlclick is null. i am trying to take text from a textarea and put it into a paragraph in HTML. With a check box. if the box is checked then it will clear the <p> tag. if unchecked it will leave the stuff in the p-tag and just make a new p-tag. thanks guys
window.onload = function() {
document.getElementById("paste").onclick = function() {
//var y = document.getElementById('paste').onclick
var paragraph = document.getElementById('box').value;
var x = document.getElementById("write");
var getInfo = document.getElementById('ParaWrite');
if (x.checked === true)
paragraph =+ "<p>"+paragraph+"</P>";
else
return;
getInfo.innterHTML === paragraph;
}
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TeXt BoX</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="Textbox.css">
</head>
<body>
<h1></h1>
<form name="form1" id="form1">
<input type='checkbox' name='write' id='write' value='Check' />
<label for='write'>Append Paragraph</label><br/>
<textarea type="text" id="box"/></textarea>
<input type='button' value="Paste typed text" id="Paste"/>
</form>
<p id="ParaWrite"></p>
<script type="text/javascript" src="TextPara.js"></script>
</body>
</html>
id name is case sensitive. Change your onclick assigning call to
document.getElementById("Paste").onclick =
change paste to Paste
Also it not =+ correct one is +=
Your selector is looking for an id paste, but your element has an id Paste:
var thisWillBeNull = getElementById('paste') ==> null
thisWillBeNull.onclick ==> TypeError: Cannot read property 'onclick' of null
Related
So, I've copied this code and tried to run it. It supposed to take the input (in this case, name) and save it into a text file. But, it didn't work as I expected, can someone tell me what's wrong with this code?
<!DOCTPYE html>
<head>
<title>Web test</title>
</head>
<body>
<form onSubmit="WriteToFile(this)">
<label>Name please: </label>
<input type="text" name="nname" id="fname" size="18">
<br>
<br>
<input type="submit" value="submit">
</form>
<script>
function WriteToFile(passForm){
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CeateTextFile("test.txt", True);
var firstName = document.getElementById('fname');
s.writeline(firstName);
s.writeline("");
s.Close();
}
</script>
</body>
<html>
There's a misspelling here var firstName = document.geteElementById('fname'); it's supposed to be var firstName = document.getElementById('fname');
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
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>
I want to be able to return a certain output in the div container whenever someone enters a number greater than 0 in the input textfield and hits the submit button. I am unsure of what I am doing incorrect. Any help would be greatly appreciated!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='Jquery.css'/>
<script type="text/javascript" src="Jquery.js"></script>
</head>
<body>
<!-- Input Field-->
<input type="text" id="first" maxlength="6" placeholder="0.00">
<!-- Span -->
<span>< Type here</span>
<!-- Submit -->
<button onclick="submitNumber()">Submit</button>
<!-- Output -->
<div id="textOutput">
Are you correct?
</div>
</body>
</html>
JAVASCRIPT
function submitNumber() {
textInput = document.getElementById('first');
textOutput = document.getElementById('textOutput');
if (textInput > 0) {
textOutput.innerHTML = 'Correct!';
} else {
textOutput.innerHTML = 'Incorrect!';
}
}
document.getElementById('first') returns a dom element, not the value of the input field, you need to read the value property of the input element
textInput = document.getElementById('first').value;
textOutput = document.getElementById('textOutput');
Demo: Fiddle
You need to check for the value of the DOM element in the variable textInput, you are checking for the element document.getElementById('first')) instead, you can get the value of the input element using the .value property:
if (textInput.value > 0) {
Demo
I am using a JavaScript function called showDate() that is passed a parameter (called id). I am trying to get the function to display the date with the innerHTML property that is passed to the function in the function call.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>My bored html</title>
<script type = "text/javascript">
function showDate(id)
{
document.getElementById(id).innerHTML = Date();
}
</script>
</head>
<p id = "Datepara" style = "font-family:comic sans ms;color:orange;text-align:center;font-size:25px;">
Date: 24/9/12 <br /><br /><br/>
</p>
<input type = "button" onclick = "showDate(Datepara)" value = "Display today's date" />
</body>
</html>
Change
showDate(Datepara)
by
showDate('Datepara')
Otherwise you're passing the html element and not just the id.
You need to quotes around the element's id string:
<!DOCTYPE html>
<html>
<head>
<title>My bored html</title>
<script type = "text/javascript">
function showDate(id)
{
document.getElementById(id).innerHTML = Date();
}
</script>
</head>
<p id = "Datepara" style = "font-family:comic sans ms;color:orange;text-align:center;font-size:25px;">
Date: 24/9/12 <br /><br /><br/>
</p>
<input type = "button" onclick = "showDate('Datepara')" value = "Display today's date" />
</body>
</html>
The best way to do it is:
<input type = "button" onclick = "show Date('Datepara')" value = "Display today's date" />
I hope this is helpful.