I' m new to JavaScript and am writing a function which has to calculate circle area. But the problem here is that I don't fully understand the concept of functions. So here is my Html code where i have 2 div elements with specific ID. I want my function to take the innerHTML from the first div and according to the given formula int the function to output the result into the second div. Can you help me cause maybe I make some huge error inhere.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Circle Area</title>
<meta charset="utf-8" />
</head>
<body>
<div id="area">7</div>
<div id="output"></div>
<script type="text/javascript" src="circle-area.js"></script>
</body>
</html>
And here is my Js file
function calcCircleArea(r, formula) {
r = document.getElementById("area").innerHTML;
var formula = Math.PI * (r * r);
return formula;
}
document.getElementById("output").innerHTML = formula;
You have to call the function
function calcCircleArea() {
var r = document.getElementById("area").innerHTML;
var formula = Math.PI * (r * r);
return formula;
}
document.getElementById("output").innerHTML = calcCircleArea();
FIDDLE
You don't need argument in the function as you are not passing any parameters to the function. You need to call the function. Change your javascript to:
function calcCircleArea() {
r = document.getElementById("area").innerHTML;
var formula = Math.PI * (r * r);
return formula;
}
document.getElementById("output").innerHTML = calcCircleArea();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Circle Area</title>
<meta charset="utf-8" />
<script>
// There is no need to declare argument variables once again
// Besides, it's better to get radius from outside, i.e. from function call
function calcCircleArea(r) {
return Math.PI * (r * r);
}
</script>
</head>
<body>
<div id="area">7</div>
<div id="output"/>
<script>
document.getElementById("output").innerHTML = calcCircleArea(document.getElementById("area").innerHTML);
</script>
</body>
</html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
enter code here
</html>
This is a simple example for use script inside the html file.
It may helps.
Related
I am trying to create a simple genorator code for a flight simulator. It should genorate four numbers between 0 and 7, and then update the text of a Div.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SG 0.0.0</title>
<script src="index.js"></script>
</head>
<body>
<div id="squawk">0000</div>
<button onclick="genSquawk" id="gen">Genorate Squawk</button>
</body>
</html>
JS:
const div = document.getElementById('squawk')
var num1 = Math.random() * 7;
var num2 = Math.random() * 7;
var num3 = Math.random() * 7;
var num4 = Math.random() * 7;
function genSquawk() {
div.textContent = num1,num2,num3,num4;
}
div.textContent = num1,num2,num3,num4; is not valid syntax. If you want an an array, for instance, you could use [num1, num2, num3, num4]. Since you're updating the node's text content, you likely want to make these numbers a string value to insert into your div element. In that case, there are many ways to make a string from your series of numbers. One way is string concatenation, something like
div.textContent = `${num1}, ${num2}, ${num3}, ${num4}`;
There are a few changes to be made. One is the following line:
<button onclick="genSquawk" id="gen">Genorate Squawk</button>
You are referencing the genSquawk function on the onclick property, not calling it. The correct is:
<button onclick="genSquawk()" id="gen">Genorate Squawk</button>
Now it should trigger the function properly. The second one is: the syntax num1,num2,num3,num4 is not correct, and will cause the code to display only the first num. In order to do so, use string literals: ${num1}, ${num2}, ${num3}, ${num4}.
Finally, I do not know if you want integers or if each of the four numbers could be floats. But I added a function to generate a int number between 0 and 7.
function getRandomArbitrary() {
return Math.floor(Math.random() * 7);
}
function genSquawk() {
const div = document.getElementById('squawk')
var num1 = getRandomArbitrary();
var num2 = getRandomArbitrary();
var num3 = getRandomArbitrary();
var num4 = getRandomArbitrary();
div.textContent = `${num1}${num2}${num3}${num4}`;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SG 0.0.0</title>
<script src="index.js"></script>
</head>
<body>
<div id="squawk">0000</div>
<button onclick="genSquawk()" id="gen">Genorate Squawk</button>
</body>
</html>
The result of the following code is only 🧜🏽♂️ 🏾🏿🛀🛌🏻🏼🧑🤝👭👩👫👨👬, where I want to find all the unique graphic represationations shown in the Firefox output that I copied to the var a originally. (Basically the code should show the original a string as output.)
How to do that?
<html>
<head>
<meta charset="UTF-8" />
<script>
var a = '🧜🏽♂️ 🧜🏾♂️ 🧜🏿♂️ 🧜🛀🏿 🛌🏻 🛌🏼 🛌🏽 🛌🏾 🛌🏿 🧑🏻🤝🧑🏻 🧑🏻🤝🧑🏼 🧑🏻🤝🧑🏽 🧑🏻🤝🧑🏾 🧑🏻🤝🧑🏿 🧑🏼🤝🧑🏻 🧑🏼🤝🧑🏼 🧑🏼🤝🧑🏽 🧑🏼🤝🧑🏾 🧑🏼🤝🧑🏿 🧑🏽🤝🧑🏻 🧑🏽🤝🧑🏼 🧑🏽🤝🧑🏽 🧑🏽🤝🧑🏾 🧑🏽🤝🧑🏿 🧑🏾🤝🧑🏻 🧑🏾🤝🧑🏼 🧑🏾🤝🧑🏽 🧑🏾🤝🧑🏾 🧑🏾🤝🧑🏿 🧑🏿🤝🧑🏻 🧑🏿🤝🧑🏼 🧑🏿🤝🧑🏽 🧑🏿🤝🧑🏾 🧑🏿🤝🧑🏿 👭🏻 👩🏻🤝👩🏼 👩🏻🤝👩🏽 👩🏻🤝👩🏾 👩🏻🤝👩🏿 👩🏼🤝👩🏻 👭🏼 👩🏼🤝👩🏽 👩🏼🤝👩🏾 👩🏼🤝👩🏿 👩🏽🤝👩🏻 👩🏽🤝👩🏼 👭🏽 👩🏽🤝👩🏾 👩🏽🤝👩🏿 👩🏾🤝👩🏻 👩🏾🤝👩🏼 👩🏾🤝👩🏽 👭🏾 👩🏾🤝👩🏿 👩🏿🤝👩🏻 👩🏿🤝👩🏼 👩🏿🤝👩🏽 👩🏿🤝👩🏾 👭🏿 👫🏻 👩🏻🤝👨🏼 👩🏻🤝👨🏽 👩🏻🤝👨🏾 👩🏻🤝👨🏿 👩🏼🤝👨🏻 👫🏼 👩🏼🤝👨🏽 👩🏼🤝👨🏾 👩🏼🤝👨🏿 👩🏽🤝👨🏻 👩🏽🤝👨🏼 👫🏽 👩🏽🤝👨🏾 👩🏽🤝👨🏿 👩🏾🤝👨🏻 👩🏾🤝👨🏼 👩🏾🤝👨🏽 👫🏾 👩🏾🤝👨🏿 👩🏿🤝👨🏻 👩🏿🤝👨🏼 👩🏿🤝👨🏽 👩🏿🤝👨🏾 👫🏿 👬🏻 👨🏻🤝👨🏼 👨🏻🤝👨🏽 👨🏻🤝👨🏾 👨🏻🤝👨🏿 👨🏼🤝👨🏻 👬🏼 👨🏼🤝👨🏽 👨🏼🤝👨🏾 👨🏼🤝👨🏿 👨🏽🤝👨🏻 👨🏽🤝👨🏼 👬🏽 👨🏽🤝👨🏾 👨🏽🤝👨🏿 👨🏾🤝👨🏻 👨🏾🤝👨🏼 👨🏾🤝👨🏽 👬🏾 👨🏾🤝👨🏿 👨🏿🤝👨🏻 👨🏿🤝👨🏼 👨🏿🤝👨🏽 👨🏿🤝👨🏾 👬🏿 🏻 🏼 🏽 🏾 🏿 ';
var b = [...new Set([...a])];
var c = b.join('');
function init() { document.getElementById('result').innerHTML = c; }
</script>
</head><body onload="init()">
<span id="result"></span>
</body>
</html>
{
var word = pickRandom([
'Quacks' ,
'eats',
'Hoots',
]);
print('the owl' + word + 'at midnight');
}
I've seen examples use arrays this way, but when I plug it in into my coding software , either nothing appears or it claims that pickRandom is undefined
What am I doing wrong?
pickRandom isn't a real function! Print doesn't exist in Javascript! Here is how to do it :
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function pickRandom() {
var wordsarray= ['Quacks', 'eats', 'Hoats'];
var randomnumber = Math.floor(Math.random() * wordsarray.length);
document.write(wordsarray[randomnumber]);
}
</script>
<button value="clickme" onclick="pickRandom()">Click Me To Pick A Random Word!</button>
</body>
</html>
create a pickRandom function:
function pickRandom(warray){
var randomNumber = Math.floor(Math.random() * warray.length);
return warray[randomNumber];
}
var words=['Quacks',
'eats',
'Hoots'];
var random=pickRandom(words);
console.log(random);
I'm trying to build something that would resemble a slide show, where you have an image and when you click on it, it is replaced by another randomly in my series of images. I first tried with simple html, but of course the images don't switch randomly. So I did my research and found that it could be done with an array in Javascript. I just don't really know a lot about javascript…
This is what I could find but it doesn't work, I'm sure there is a stupid mistake in there that I can't see:
this is my javascript
function pickimg2() {
var imagenumber = 2 ;
var randomnumber = Math.random();
var rand1 = Math.round((imagenumber-1) * randomnumber) + 1;
myImages1 = new Array();
myImages1[1] = "img_01.gif";
myImages1[2] = "img_02.gif";
myImages1[3] = "img_03.gif";
myImages1[4] = "img_04.gif";
myImages1[5] = "img_05.gif";
myImages1[6] = "img_06.gif";
myImages1[7] = "img_07.gif";
myImages1[8] = "img_08.gif";
myImages1[9] = "img_09.gif";
var image = images[rand1];
document.randimg.src = "myImages1";
}
there is my html
<!DOCTYPE html>
<html>
<head>
<title>mur</title>
<link rel="stylesheet" href="style.css">
<link rel="JavaScript" href="script.js">
</head>
<body onLoad="pickimg2">
<div class="fenetre">
<img src="img_01.gif" name="randimg" border=0>
</div>
</body>
</html>
If someone has another solution I'm open to it!
Fix your script link like RamenChef mentioned:
<script type="text/javascript" src="script.js"></script>
Here's the updated code, check console.log to see the different image urls getting requested.
var myImages1 = new Array();
myImages1.push("img_01.gif");
myImages1.push("img_02.gif");
myImages1.push("img_03.gif");
myImages1.push("img_04.gif");
myImages1.push("img_05.gif");
myImages1.push("img_06.gif");
myImages1.push("img_07.gif");
myImages1.push("img_08.gif");
myImages1.push("img_09.gif");
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function pickimg2() {
document.randimg.src = myImages1[getRandomInt(0, myImages1.length - 1)];
}
<div class="fenetre">
<a href="#" onClick="pickimg2();return false;">
<img src="img_01.gif" name="randimg" border=0>
</a>
</div>
this code bellow is working. I hope it's what you were asking for
var images = [
"http://img1.science-et-vie.com/var/scienceetvie/storage/images/galerie/deepsea-challenge-le-film-de-james-cameron-livre-des-images-inedites-des-grands-fonds-marins-5165/19818-1-fre-FR/Deepsea-challenge-le-film-de-James-Cameron-livre-des-images-inedites-des-grands-fonds-marins_square500x500.jpg",
"http://static.mensup.fr/photos/145240/carre-premieres-images-officielles-pour-assassin-s-creed-rogue.jpg",
"http://www.pnas.org/site/misc/images/16-01910.500.jpg" ];
init();
function random_image(images) {
var random = randomize(images);
while(images[random] === document.getElementById("image").src){
random = randomize(images)
}
document.getElementById("image").src = images[random].toString();
}
function randomize(array){
return Math.floor((Math.random() * (array.length)));
}
function init() {
document.getElementById("image").addEventListener("click", function(){
random_image(images);
});
random_image(images);
}
<!DOCTYPE html>
<html>
<head>
<title>Bonjour</title>
</head>
<body >
<div class="fenetre">
<img id="image" src="" name="randimg" >
</div>
</body>
</html>
I have this JS code, in which i would like to call x var and set value. But it is not working: When the function returns the value of x, the result is undefined:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
var myvar={
FirstL:function(){
var x='hello world';
}
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="document.write(myvar.FirstL().x);" >
</body>
</html>
var x is a private variable and you cannot use it outside the function scope, you may just return the x and call your method:
var myvar={
FirstL:function(){
var x='hello world';
return x;
}
}
In html attribute:
onclick="document.write(myvar.FirstL());"//FirstL() returns the 'x'
Suggestion:
Don't use document.write() you may google for its alternative.