I have a problem guys. Trying to write HTML and JS code in different files and connect them. I think I have done it, but nothing works. How it must be done? (javascript file name is correct)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="index.js">
<title>Document</title>
</head>
<body>
<h3>Check password size</h3>
<div class="checker">
<input type="password" name="passcode" placeholder="Enter password" ><br><br>
<input type="submit" value="check my password!" onclick="checkpassword()">
</div>
<p id="message" class="message"></p>
</body>
</html>
JAVASCRIPT
function checkpassword(){
var pas=document.getElementsByName('passcode')[0].value;
var x=pas.length;
document.getElementById("message").innerHTML="Password size is" +" " +x +" " +"characters";
}
You sould use the following line to call for/import your javascript.
<script type="text/javascript" src="index.js"></script>
The way you are writing the code is only to call for a css file.
To call for a different language, you use a different code.
<script src="fileName.js"></script>
This is used to connect js to html src means source
One more way to do js in html is by using in html and writing your code in the tag like
<script>
function checkpassword(){
var pas=document.getElementsByName('passcode')[0].value;
var x=pas.length;
document.getElementById("message").innerHTML="Password size is" +" "
+x +" " +"characters";
}
</script>
you can put this code in html or can make seprate files
hope it helped you :)
You need to use the script tag to connect javascript with html
<script src="yourFile.js"></script>
Related
After a number input submission I want to go from the index.html file to an other html file or something like that.
Can somebody help me?
That's the code i wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="nick.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Bet</h1>
<form action="cool.html">
<label class="amountMoney" for="amountMoney">Input the amount of money you want. The money will be converted in dollars</label>
<h3>The value can't be more than 100 or less than 10</h3>
<input id="amountMoney" type="number" placeholder="Amount of money" min="10" max="100" required>
<button type="submit">Submit</button>
</form>
<script src="script.js" defer></script>
</body>
</html>
Btw I'm linking a different css file in cool.html
If you’re just using html (no scripting language) you need to do it this way, using the method and action parameters at the top of your form:
<form method="post" action="cool.html">
Or you can redirect to a new page after processing the form server side, if that applies to your case scenario.
I am learning JavaScript. I create a file in same folder and linked it with html. The problem is when I write alert("Hello World") so it shows message in browser but when I am trying
document.getElementById("p1").innerHtml = "Hello world"
it does not change the content of my HTML element.
The HTML DOM property is innerHTML, not innerHtml:
document.getElementById("p1").innerHTML = "Hello world";
<div id="p1"></div>
Now the JavaScript code is executed before your browser loaded the DOM, so it won't work.
Move the <script src="main.js"></script> just above </body> in your HTML file. This way the DOM gets loaded before the JavaScript code.
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1 id="p1">hi</H1>
<script src="main.js"></script>
</body>
</html>
When I make a JS file and run it in Terminal it successfully runs .
code:
function add(x,y){
var sum = x+y;
console.log(sum);
}
add(15,5);
this code gives me correct answer, but when I create an HTML file and link it with the same Javascript file and trying to run it in terminal a pop-up massage says "code language not supported or defined"
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="indaxi.js"></script>
</head>
<body>
</body>
</html>
so , why is that ..?
You will need to make sure that your file is referenced correctly. Here it is expected to be in the same folder as the HTML file that you have. As about the language, you can specify it as
<script type="text/javascript" src="indaxi.js"></script>
I have been messing around with HTML code in glitch.com, and I'm wondering, how do I make someone enter an input and make that input be saved so it can be seen by him or other people, kinda like a message, and is there a way to log it using JavaScript's console.log() even though I'm using HTML?
I tried creating variables and using console.log() using JavaScript.
JavaScript code:
console.log("logging function started");
let msg = prompt('Send message', "Enter text here");
alert(`${msg} has been sent!`);
console.log(msg + "has been sent!")
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<h1>input test</h1>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Note: When I tried creating variables and using console.log(), nothing showed up in logs.
Move your <script> tag to the bottom of your <body> tag.
See also this answer: https://stackoverflow.com/a/5329895/1651980
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>input test</h1>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</body>
</html>
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.