Why doesn't document.write output anything to the page? - javascript

The document.write("*stuff here") won't work at all for some reason. I've tried everything! capitalization, variables, nothing!
<!doctype html>
<body>
<center>
<script type="javascript">
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A+B;
var Input = document.getElementById('Input');
document.write("stupid javascript");
function answer() {
if(Input == C) {
document.write('correct!!');
}
else {
document.write("Incorrect!");
}
}
document.write("A + B")
</script>
<form Id="Input">
<input type="text">
</form>
<form onsubmit="javascript:Answer">
<input type="submit" value="submit">
</form>
</body>
</html>

Your script type isn't correct.
<script type="javascript"> is wrong...
<script type="text/javascript"> is correct...

What was wrong is
<script type="javascript">
It must be
<script type="text/javascript">
. To execute scripts immediately, you can add the following code after input:
<script>document.write('Javascript is not stupid')</script>

You need to change 'Answer' to 'answer' in the following line:
<form onsubmit="javascript:Answer">

Related

JavaScript won't output value in function

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.

Code not working (JavaScript)

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>

HTML get input from textarea and pass it to my Javascript function

I want to get user-input from text-area and pass it to my Javascript function with the following code but can't make it work. Could anybody help me with this?
<!DOCTYPE html>
<head>
<title>Testing</title>
<script type="text/javascript">
function MyFunc(UserCode.value) {
var syntax = esprima.parse(UserCode.value);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
</script>
<script src="esprima.js"></script>
<script src="parse.js"></script>
</head>
<body>
<label>Please enter your code:</label>
<br>
<textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
</textarea>
<br>
<button type="button" onclick="MyFunc(UserCode.value)">Convert</button>
<p id="demo">Result</p>
</body>
</html>
First of all, you are trying to access your textarea element incorrectly. You must use document.getElementById, like so:
<button type="button" onclick="MyFunc(document.getElementById('UserCode').value)">Convert</button>
Second, you are defining your function incorrectly. Your function should look something like this:
function MyFunc(text) {
var syntax = esprima.parse(text);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
UserCode is not defined in your code. Creating an element with an id does not make a javascript variable with that name magically. You've got to get a reference to the element the same way you do with the demo paragraph:
<!DOCTYPE html>
<head>
<title>Testing</title>
<script type="text/javascript">
function MyFunc(textAreaId) {
var value = document.getElementbyId(textAreaId).value;
var syntax = esprima.parse(value);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
</script>
<script src="esprima.js"></script>
<script src="parse.js"></script>
</head>
<body>
<label>Please enter your code:</label>
<br>
<textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
</textarea>
<br>
<button type="button" onclick="MyFunc('UserCode')">Convert</button>
<p id="demo">Result</p>
</body>
</html>
Example: http://jsfiddle.net/3ackg/
JS:
$("#convert").click(function() {
var code = $('#code').val();
//var code = esprima.parse(code);
var result = JSON.stringify(code);
$('#result').html(result);
});
HTML:
<textarea rows="4" cols="50" id="code">var answer = 6 * 7;</textarea>
<button type="button" id="convert">Convert</button>
<p id="result">Result</p>

Javascript output text based on input value

I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>

How to use window.open inside the window.load function event

Should I use window.open() inside window.onload function in Javascript? If not how to use that in window.onload="url". Please show me some example. Here below is what am trying to do. The text validation is working fine. Once I enter run string its not going to open the `evovle.jsp (concern url)
e.g.:
<html>
<head>
<script type="text/javascript">
function validatetxtbox()
{ var txtfield;
txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
window.onload=function(){window.open('evolve.jsp''welcome' 'width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');}
}
else { alert("Try again"); }
}
</script>
</head>
<body>
<input type="text" id="txtbox" maxlength="3">
<input type="button" id="btn" value="Send" onclick="validatetxtbox()">
</body>
</html>
<html>
<head>
<script ="text/javascript">
function check() {
var txtfield; txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
var newwin=window.open('evolve.jsp','welcome','width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes');
newwin.focus();
}
else { alert("Try again"); }
}
</script>
</head>
<body>
Enter a Keayword
<input type="text" id="txtbox" onblur="check()" />
</body>
</html>
Use querystring and check in evolve.jsp
Ex evolve.jsp#alertme

Categories