JavaScript being weird in Brackets code editor - javascript

I'm using JS in brackets, and I'm having some problems. First, the alert property doesn't work. Is this just because of brackets live preview? Second, it doesn't tell me when I've made errors )I entered in nonsensical commands, and there was no errors at all. Also, when I named a variable starting with a number, no error message! These are just problems I noticed in the last 5 minutes. Please help! Here's my code:
<html>
<head>
<script>
document.write("Hello world");
var someText = " years old";
var years = 35;
alert(years + sometext);
</script>
</head>
<body>
</body>
</html>

You declare your variable as someText but then refer to it as sometext in your alert:
<html>
<head>
<script>
document.write("Hello world");
var someText = " years old";
var years = 35;
alert(years + someText); // <--
</script>
</head>
<body></body>
</html>

Related

problem with console command, the content can not print anything?

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>

Javascript if statement issue: No display in the webpage

I have a VERY BASIC knowledge of javascript and I was looking forward to learn some conditional statement in javascript. So I went on and entered this code in a HTML file called "index.html":
<!DOCTYPE html>
<html>
<head>
<title>A sample webpage</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
And the result that came was completely normal. A title called "Sample Webpage" appeared.
But the next code what I entered created problems in the result,
var myNumber = window.prompt("Enter number: ");
parseFloat(myNumber);
document.write(myNumber);
The result comes as expected.
if (myNumber > 15) {
document.write(<p>Good! You've passed! </p>);
}
else {
document.write(<p>You failed! Try again next time.</p>);
}
But when I add this if statement which gives an output based on the user's input, I get a blank page. I don't understand what is the reason for this. Are there any problems in the syntax?
It also seems to me that it doesn't execute the first part of the code I've written, it completely wants all of the code. I feel this is normal but doesn't it have to actually execute the "document.write" code?
Way I see it, you need to quote your strings in document.write(string).
like this:
if (myNumber > 15) {
document.write("<p>Good! You've passed! </p>");
}
else {
document.write("<p>You failed! Try again next time.</p>");
}
I hope it is useful for you. Thank you.
document.write takes a string as argument. You pass it HTML.
Just change
document.write(<p>Good! You've passed! </p>);
to
document.write('<p>Good! You've passed! </p>');
to make it work. A better approach is to add
<p id="message"></p>
to the page and where you have
document.write('<p>Good! You've passed! </p>');
you can use
document.getElementById('message').textContent='Good! You've passed!';
document.getElementById("myButton").addEventListener('click', function() { // when clicked
let myNumber = window.prompt("Enter number: ");
myNumber = parseFloat(myNumber); // convert to number from string
document.getElementById('number').textContent = myNumber;
const msg = document.getElementById('number'); // output container
if (myNumber > 15) {
msg.textContent = 'Good! You\'ve passed!' // escaping the quote
}
else {
msg.textContent = 'You failed! Try again next time.';
}
});
// above can be written using a so called ternary:
// msg.textContent = myNumber > 15 ? 'Good! You\'ve passed!' : 'You failed! Try again next time.'
<!DOCTYPE html>
<html>
<head>
<title>A sample webpage</title>
</head>
<body>
<p id="number"></p>
<p id="message"></p>
<button type="button" id="myButton">Did you pass?</button>
<script src="script.js"></script>
</body>
</html>

How to get JavaScript text to show?

This is for a class I'm taking. Its homework out of the book for a particular chapter. The book provides some code that is purposly not working and you have to fix it. I've got it all working exept for this part where youre supposed to get some text to show up at the bottom of the screen that displays the last time the document was modified.
Ive gone over it repeatably and cant find whats wrong. Im wondering if the book has it wrong.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
</script>
</head>
<body>
<div id="xxx"></div>
</body>
The mistakes are in your program
Missing closing curly } brace.
Not invoking the function CopyRight()
Inside CopyRight() not getting the xxx element to work on this.
Script should be invoked when the dom is ready (so placed script after xxx tag)
Correct version of your program is
<html>
<head>
</head>
<body>
<div id="xxx"></div>
<script type="text/javascript">
function CopyRight() {
var xxx = document.getElementById('xxx'); //mistake 3
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
} //mistake 1
CopyRight(); //mistake 2
</script>
</body>
</html>
This is the working one. The code works fine but you forgot to call the CopyRight function.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
}
CopyRight(); // Call Copyright function
</script>
</head>
<body>
<div id="xxx"></div>
</body>

Why hasn't effects this piece of JavaScript code?

I read a JavaScript book and it gives you a piece of code to run but when I do I don't get anything. It runs but displays nothing.
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " +
theNumber * theNumber);
I'm running this piece of code inside a Harp project, where _layout.jade looks like:
doctype
html
head
link(rel="stylesheet" href="/main.css")
body
!= yield
<script src="main.js" type="text/javascript"></script>
and main.js
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " +
theNumber * theNumber);
I know that configuration is ok because I've been running another pieces of code before that one. Google Chrome runs the code but doesn't displays any window. I thought it could be adPause but it wasn't. Anyone knows what could it be happening?
Thanks
If you are opening the .js file in chrome, you'll just view it as raw text. You need to include it in a html page, like so:
<html>
<head>
<script type='text/javascript'>
window.onload = function()
{
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " + (theNumber * theNumber));
}
</script>
</head>
<body>
<!-- page content, if any -->
</body>
</html>
-- OR --
<html>
<head>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<!-- page content, if any -->
</body>
</html>
script.js:
window.onload = function()
{
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " + (theNumber * theNumber));
}

Javascript alert statement with string & int

Im a newbie to Javascript and trying to debug a simple js function..I need to get the value of x through the alert statement but it doesn't display correctly..How to concatenate a string and int as in this case..
<html>
<head>
</head>
<body>
<script>
function displaydate()
{
document.getElementById("test").innerHTML='first line changed';
document.getElementById("test1").innerHTML='second line changed';
var x = 5;
alert("Value of x" + String.valueOf(x));
}
</script>
<p id="test">this is the 1st line</p>
<p id="test1">this is the 2nd line</p>
<button type="button" onclick="displaydate()">clickme!</button>
<body>
</html>
New code:
<html>
<head>
</head>
<body>
<script>
function displaydate()
{
document.getElementById("test").innerHTML='first line changed';
document.getElementById("test1").innerHTML='second line changed';
var x = 5;
alert("Value of x=" + x);
var cars=new Array();
cars[0]='car';
cars[1]='Volvo';
alert("Value of arrary 1 var=' + cars[0]);
//alert("Value of arrary 2 var='+cars[1]);
}
</script>
<p id="test">this is the 1st line</p>
<p id="test1">this is the 2nd line</p>
<button type="button" onclick="displaydate()">clickme!</button>
<body>
</html>
alert("Value of x" + x);
JavaScript is a dynamic language. The conversion is done automatically for you. When you do something like "var x = string + int"
Update
The reason your alert is failing now is because you start the alert with a double quotation mark and end the string piece of the alert with a single quote.
You can just do:
alert("Value of x - " + x);
No need to call valueOf the conversion will be automatic (implicit).

Categories