I have read that placing script tag at the bottom will solve such issue of disappearing contents of the webpage till JS runs but I am still facing such issue and I don't know what is the reason behind that?
Example of my issue
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Demo</title>
</head>
<body>
<h1>First exercise</h1>
<p>Test 3 Built-in JS Methods</p>
<script src="script.js"></script>
</body>
</html>
JS Code:
var firstName = prompt("What is your first name?");
var lastName = prompt("What is your last name?");
var age = prompt("What is your age?");
var fullName = firstName +" " + lastName
console.log("Your full name is " + fullName);
console.log("You are " + age + " years old");
Related
I am newbie with javascript and I wrote a very simple program to display something using console command like this
function dogYears(dogName, age) {
var years = age * 7;
console.log(dogName + " is " + years + " years old");
}
var myDog = "Fido";
dogYears(myDog, 4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise2</title>
</head>
<body>
</body>
</html>
As you can see, I hope that I made the function and then, use var to assigned the value myDog to Fido, and then I want to use the function dogYears to print by the command console.log.
But when I ran the file .html (I saved it by .html), it did not display anything.
What error did I get in this case ? Could you please help me in this one ? Thank you very much for your help.
To display your result in browser's console just add your JavaScript logic inside script tag in your html file before closing body tag or create separate JavaScript file and import it using script tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise2</title>
</head>
<body>
<script>
function dogYears(dogName, age) {
var years = age * 7;
console.log(dogName + " is " + years + " years old");
}
var myDog = "Fido";
dogYears(myDog, 4);
</script>
</body>
</html>
The problem is that you are not viewing the console. The console is not on the webpage, but instead on a separate tab. Press F12 on the keyboard, or press Ctrl+Shift+i and then click on the console. There is nothing wrong with the code. But if you want a more protected function, you can use this JavaScript code.
<script>
function dogYears(dogName, age) {
if(typeof(dogName)==="string"&&typeof(age)==="number"){
var years = age * 7;
console.log(dogName + " is " + years.toString() + " years old");
}else{
console.log("Error you want to display");
}
}
</script>
If you want to display information on the browser, typed document.write instead of console.log
<script>
function dogYears(dogName, age) {
var years = age * 7;
document.write(dogName + " is " + years + " years old");
}
var myDog = "Fido";
dogYears(myDog, 4);
</script>
can anyone tell me what am i getting error while using script tag here ?
<HTML>
<head> <title> prac 5 ques 3 </title> </head>
<body>
<script>
var name1="Shashank Shyamsundar Phatkure";
var name2="Shashany";
var n=name1.substring(15,22)
document.write("<br/>Name1:" +name1);
document.write("<br/>Surname:" +n);
document.write("<br/>Name2:" +name2);
document.write("<br/>Copying the surname for name2:");
var name3=name2+" " +n
document.write("<br/>Name3:" +name3);
</script>
</body>
</html>
Try this solution. You can get surname using substring() or substr().
string.substr(start, length)
string.substring(start, end)
var name1="Shashank Shyamsundar Phatkure";
var name2="Shashany";
// var n=name1.substring(21,29);
var n=name1.substr(21,8);
document.write("<br/>Name1:" +name1);
document.write("<br/>Surname:" +n);
document.write("<br/>Name2:" +name2);
document.write("<br/>Copying the surname for name2:");
var name3=name2+" " +n;
document.write("<br/>Name3:" +name3);
<HTML>
<head> <title> prac 5 ques 3 </title> </head>
<body>
</body>
</html>
I am a bit new to Javascript and I am trying to learn it. I am currently creating a piece of code where it prompts the user to enter their name in and it displays if it has 5 characters or more, less, or exactly. But it keeps displaying me that it is 5 characters even though it is more than 5. If anyone could help debug this for me it would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3school.org/1999/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Understanding Javascript</title>
<script type="text/javascript"
language="javascript">
username = prompt("Please enter your name");
message = "Hello," + username + " Your name has ";
nameLen = username.Length;
if (nameLen > 5)
message = message + "more than ";
else if (nameLen < 5)
message = message + "less than ";
else
message = message + "exactly ";
message = message + " 5 characters";
alert(message)
</script>
</head>
<body>
</body>
</html>
The problem lies in this line here:
nameLen = username.Length;
This line actually sets nameLen equal to undefined.
The way in which you set out your if statement,
if (nameLen > 5) { // undefined is not greater than 5
} else if (nameLen < 5) { // undefined is not less than 5
} else { // undefined is not equal to 5 either, but who cares? it's a broad else
}
Means that it will always go into the else clause.
In order to fix this problem, simply change username.Length to username.length. JavaScript is a case-sensitive language, so these kinds of errors may appear more often in the future if you're not careful.
Basically, username.length should fix it. Typo in the property name. This code looks like it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3school.org/1999/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Understanding Javascript</title>
<script type="text/javascript"
language="javascript">
username = prompt("Please enter your name");
message = "Hello, " + username + " Your name has ";
nameLen = username.length;
if (nameLen > 5)
message = message + "more than ";
else if (nameLen < 5)
message = message + "less than ";
else {
message = message + "exactly ";
}
message = message + " 5 characters";
alert(message)
</script>
</head>
<body>
</body>
</html>
Exact syntax :
nameLen = username.length;
I have a problem with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>The Ultimate Quiz Challenge</title>
</head>
<body>
<div class="container">
<h1>The Ultimate Quiz Challenge</h1>
<script>
document.write("<h3> " + "Welcome to the ultimate quizz challenge" +"</h3>");
document.write("<p> "+"Hi I will ask you five questions and then rank you" + "</p>");
var question1 ="<p>What is the capital of England</p>";
var firstanswer ="London";
var question2 = "<p>How many sides are there to a square</p>";
var secondanswer = 4;
var noofquestions = 2;
var count = 1
/*var temp = eval('question' +1); */
/*document.write(temp);*/
/* main loop asking questions */
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
</script>
</div>
</body>
</html>
When I load the file into a browser such a chrome or safari it does not execute as hoped.
In short the document.write commands do not come out onto the screen until the prompt window as asked for two inputs. I thought the first thing to be seen would be the Ultimate Quiz Challenge followed by the commands in the open script tag down to the bottom ?
You should use the onload event on your body, so your script executes once the html page is rendered. It should work with :
<body onload="displayText()">
displayText() being a function you define in your script :
var displayText = function () {
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
};
or something similar.
I have searched online for a solution to my problem, but I can't seem to fix it.
I've tried also using a validator, but still nothing gives. Sorry if you think that this is a repeated question. I just can't seem to find anything. Here's what I did:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p><strong>User Information:</strong></p>
<button onclick="getUserInfo()">Begin</button>
<div id=”content”>Hello</div>
<script type="text/javascript">
function getUserInfo(){
var name = prompt("What is your full name?", "Name");
var age = prompt("How old are you?", "Age");
if (name !== null && age !== null) {
document.getElementById("content").innerHTML =
"Hello, my name is " + name + " and I'm " + age + " years old.";
}
}
</script>
</body>
</html>
Change
<div id=”content”>Hello</div>
to
<div id="content">Hello</div>
It might be the issue here.