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>
Related
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>
When I'm running the HTML on android, chrome is not loading the external CSS and js files, all the files are in the same folder. Repo
Beginner here.
Html
<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">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="/pali.css">
<!-- Before <link rel="stylesheet" href="pali.css">
also tried <link rel="stylesheet" href="./pali.css"> -->
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="main">
<div class="holder">
<div class="bgimg">
<span>Type in here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()">Check</button>
</div>
</div>
<span class="anshold"><p id="udans"> </p>
</span>
</div>
</body>
<script src="/palindrome.js"></script>
</html>
use ./ to your css link, not /,
ex:
./pali.css
If the files are in the same folder like you said, the slash isn't necessary - simply <link rel="stylesheet" href="pali.css"> and <script src="palindrome.js"></script>. If that doesn't work, I would also advise looking for spelling errors in the filenames.
I am currently learning to use thymeleaf and javascript. I want to create a header, and when click on the user's avatar a dropdown menu will show.
The problem I am countering is when I add <script> tag to my header fragment, when I click on the button, the console give me ReferenceError, function not found.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!-- Logged in show the user's avatar-->
<div class="profile bulge-icon" sec:authorize="isAuthenticated()">
<button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
<img class="img" alt="user profile picture" th:src="#{images/profile-placeholder.png}"/>
</button>
<div id = "dropdown-menu">
<form th:action="#{/logout}" method="post">
<button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
</form>
</div>
</div>
</header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
To make this js work, I need to add .js file to my page that uses the header fragment. For example, my test.html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
</head>
<body>
<header th:replace="global/header :: header"></header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
Is there a method to let .js works when <script> tag is put in my header.html. So in this way, I don't need to add header.js to every page that use the header fragment.
When you use th:replace, Thymeleaf will literally take the contents of that <header> element and place it in your main page. That JavaScript line in your header fragment will never be used.
The way I usually handle this is using Thymeleaf Layout Dialect so that all needed script tags are included on every page. See https://ultraq.github.io/thymeleaf-layout-dialect/ for info on how to use it.
For example, create a layout.html file like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
<div layout:fragment="page-content">
</div>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</head>
</html>
Now update test.html to use it:
<!DOCTYPE html>
<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
<header th:replace="global/header :: header"></header>
<!-- Add more content for the test page here -->
</div>
</body>
</html>
If the header should be on all pages, you can also move it into layout.html.
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.
The is a part of my html where I am trying to include the another HTML file "content.html" but it is not working. Those addresses in the source are correct but still I am not able to make it happen.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-include src="'content.html'"></div>
</body>
</html>
and this is my content.html
<div class="container">
<h1>Heading!</h1>
</div>
You should add ng-app="" to your page html tag, so that angular will get kick off on the page. After that will start traversing the page & will collect all directive & it will compile them.
<html lang="en" ng-app="">
Instead of ng-include with src you could directly pass template value in ng-include attribute as well.
<div ng-include="'content.html'">
Demo Plunkr