Why is my output repeating? - javascript

I want to alert "running function cannons" then when I press ok I want it just to say "cannon ship sails off to 14 degrees" but it keeps printing the alert within my output.
JS
function alertMessage (message) {
alert (message);
}
alertMessage("the Battle has begun");
function alertShip (ship, number) {
alert (ship);
document.write (ship + "the ship sails off to " + number + "degrees");
}
alertShip("running function cannons", 14);
HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Functions</title>
<!-- This links to the js code specific for this page -->
<script src="functions.js"></script>
</head>
<body>
<div id="output"> </div>
<div id="output2"> </div>
</body>
</html>

Try removing the ship parameter from the document.write and replacing the statement with this:
document.write("cannon ship sails off to " + number + " degrees");
Then, you should be able to get your desired output.
*p.s.: if you're doing this on a text editor and trying to run this on a browser, you can consider changing the tag to this: .
I hope this helps!

don't give them the same variable to output .. alert (ship) then document.write (ship+.....).
Try this instead
function alertShip (ship, number) {
alert (ship);
document.write ("Cannon ship sails off to " + number + "degrees");

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>

Why is dom.innertext was updated and rendered after the while is finished in this example?

I am pretty new to javascript and am working on an assignment.
The problem I have can be demonstrated via codes below:
For HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A3Q5</title>
<script src='xxx.js'> // external js
</script>
</head>
<body>
<div class="container">
<button id="startBtn">Start</button>
<div id="displayStart">x</div>
</div>
</body>
</html>
For the xxx.js code:
function setup(){
document.getElementById("startBtn").addEventListener('click',startRace,false);
}
function startRace(){
var test = document.getElementById("displayStart");
test.textContent = "adsasdasds";
console.log(test.textContent);
var c = 5;
while(c--){
var counter = 500000000;
while(counter--){} // try to simulate some delays
}
}
window.addEventListener('load',setup,false);
so the problem is, when I run the program and click the button, the console prints "adsasdasds" however the div element is not updated in the browser until the first while loop is done....
Doesn't js run sequentially like java / C++ if no async is specified ?
Hope someone can help me out
The desired result will be : the div is updated before entering the while loop as the sequence of code execution...
Thank you !

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>

Using html() method with a symbol in jQuery

I wanted to create an updates list, when you see only the title of the update- unless you click on a down-pointing triangle near the title, and then you will see the full update information + the down-pointing triangle will change to an up-pointing triangle. And after clicking on the up-pointing triangle- you will see only the title of the update again + the triangle will be down-pointing.
So I wrote the following code in order to implement that:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
arrowsUpdate();
</script>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 1</span>
</p>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 2</span>
</p>
</body>
</html>
JS:
function arrowsUpdate(){
$(document).ready(function(){
$(".down-arrow").each(function(){
$(this).click(function(){
$(this).siblings(".hidden-text").slideToggle(0,"linear");
if($(this).html()=="▼")
$(this).html("▲");
else
$(this).html("▼");
});
});
});
}
The problem with this code is that the pointing triangle is always down-pointing. It seems that there is a problem with the if statement- which always returns false.
I don't understand why that happens, especially when the set code lines ($(this).html("▲");and $(this).html("▼");) are working as expected (tried using those code lines in a different page- and it works).
Why the condition $(this).html()=="▼" returns always false, if the content of this is ▼?
You can set html with entities, but when you get it back, it will no longer be entities but characters, that's how entities work.
To be clearer, this line fails every time
if( $(this).html()=="▼" )
because $(this).html() will never return an entity, but the character ▼ instead, proof ...
document.body.innerHTML = '▼';
console.log( document.body.innerHTML )
An easier way to create toggle functionality without relying on the markup, would be to just use a flag
function arrowsUpdate() {
$(".down-arrow").on('click', function() {
$(this).siblings(".hidden-text").slideToggle(0, "linear");
var flag = $(this).data('flag');
$(this).html(flag ? "▼" : "▲").data('flag', !flag);
});
}

How to make the output of multiple JavaScript functions display in HTML?

So I'm trying to display the results of a few function calls in a JavaScript file that uses benchmark.js in a separate HTML file.
My js file looks something like this (disregard the names of methods and classes):
class.init(function(context) {
Benchmark("function description", {
'defer': true,
fn': function(deferred) {
var x = context.ones([100, 100]);
var y = x.repeat(2, 0);
context.barrier(function (){
deferred.resolve();
});
},
'onComplete': function(event) {
//This is what I'd like to print out
console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
//
}
}).run();
There are multiple function calls similar to this.
My HTML just looks something lile:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Sublime Webpage </title>
</head>
<body>
<div class="main">
<div class="head">
<h1>Hello</h1>
</div>
<script src="filename.js"></script>
</div>
</body>
</html>
At the moment, it just prints the results to the console, which is better than nothing, but obviously not what I want. I talked to someone briefly and they suggested I use jQuery. I looked into it, and tried using document.write(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms") in the place of console.log(), but this didn't seem to work. Does anyone have suggestions?
Use document.createTextNode:
// add an output div to your html
<div id='output'></div>
// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));
Fiddle

Categories