How to live reload the changes to my file.html? - javascript

I've been using livereload with sublime text for a while, in order to live reload markdown and preview in the browser.
Now I'm wondering if it's possible to live reload non markdown also, i.e. my file.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
hello world 4
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
So I was hoping to save that file on sublime text and see the changes on the browser, but that's not happening. Perhaps I'm missing some fundamentals on how things work. Is that supposed to work, what part am I doing wrong?

Related

why is document.getElementById() not working in VS Code?

why is document.getElementById() not working in VS Code?? I keep getting this error: "Uncaught ReferenceError ReferenceError: document is not defined". I'm new to VS Code but I'm assuming the reason It's not working is that I need to install some extension to make it work. The same code is working on Replit but not VS code. I installed JS(ES6) Snippets, Open-in browser, Live Preview and Live Server. It's very simple 2-line code just to experiment but it's not working. It's driving me crazy!
let head = document.getElementById('change')
head.innerText = 'hello'
I bet that you are not running this in an index.html file in the browser, so this is not VS Code problem, you are probably running this in a node console or something, there is no html or document in what you are trying to test and that is why you are getting this error.
<!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="styles.css">
<title>Document</title>
</head>
<body>
<h1>HELLO</h1>
<hr />
<h2 id="change"></h2>
<script>
let head = document.getElementById('change')
head.innerText = "why isn't this working?";
</script>
</body>
</html>
Definitely has nothing to do with VS Code.
Make sure your html file is referencing your javascript file.
<!DOCTYPE html>
<html>
<body>
<h1>This is my HTML file</h1>
<script src="script.js"></script>
</body>
</html>
The script element should be in your html with the name of your js file
<script src="script.js"></script>
This not the vscode issue please check you are running the right file

Standalone "Uncaught" Alert on Chrome Console

I'm new to coding in HTML, CSS, and JavaScript, so please forgive me if my code is messy and/or incorrect.
I'm trying to make a website that can help people who are feeling mentally down, and for the first page, I added an input box which asks for the user's name, which will then be read in the next page. For example, if I put "Henry", the next page should say "Hello, Henry!" To read the variable in the next page, I used sessionStorage and sessionStorage.getItem("inputVal"). But, for some reason, when I try to log the variable (inputVal) in the first page, the console gives an error that simply says "Uncaught" for a brief moment before clearing when loading to the next page. Then, when I try to log the inputVal on the next page, the console only prints "null". I have scoured numerous forms, but I could not find anything to fix my problem! Have I written the sessionStorage wrong, or is there something else I'm missing? Here is the code for my first file:
<!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="main.css">
<title>Feel Happy</title>
</head>
<body>
<b class="welcometofeelhappy">Welcome to FeelHappy :)</b>
<input type="text", id="whatisyourname", placeholder="Please enter your name!", class="whatisyournameinput" required><br>
<form action="pages/landing.html">
<button class="startBtn", type="submit", id="btn1", onclick="getInputValue()"><h2 class="buttontext1">Let's Begin!</h2></button>
</form>
<script>
function getInputValue(){
var inputVal = document.getElementById("whatisyourname").value;
console.log(inputVal)
sessionStorage("inputVal", inputVal)
}
</script>
</body>
</html>
And the code to the second file:
<!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">
<title>Document</title>
</head>
<body>
<button onclick="getName()" type="button">Click Me!!</button>
<script>
function getName() {
var inputVal = sessionStorage.getItem("inputVal")
console.log(inputVal)
}
</script>
</body>
</html>
Note: For testing purposes, I put a button to print the code in the console.
sessionStorage("inputVal", inputVal) is not how you write things to the session store. sessionStorage itself is not a function, it's an object that provides methods, like setItem.
You need sessionStorage.setItem("inputVal", inputVal).
In terms of debugging, your browser's console can almost certainly be configured to persist logs after page transitions, which will allow you to see error messages even after you navigate away from the page where the error occurred.

How do I source javascript file on android?

This is my html and javascript code.
<!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">
<title>Document</title>
</head>
<body>
<p id = 'test' onclick= "switchtest()">Hello world</p>
<script src = 'phonetest.js'></script>
</body>
</html>
function switchtest(){
document.getElementById('test').innerHTML = 'Goodbye'
}
It works on visual studio code live server, but when I transfer these 2 files to my phone and open it on chrome there, the onclick function stops working. It only works if function is in the same html file. The path to my html file is "/Internal storage/TestCode/phonetest.html" and the path to my javascript file is "/Internal storage/TestCode/phonetest.js"
I read that I might need to specify file location or that I may need a xml file, but I am not sure what I must do exactly. Does anyone know a fix?

Change URL on GIF animation end

I am trying to change the URL of a website once a GIF has reached its last frame. What I got to, is that I can use the libgif.js setup.
However I am having difficulties making it work and figuring out the components. There are a couple of example suggestions, but all I need it to do is check if the GIF has finished and if so go to another URL.
The following code is what I have gotten to so far, it loads the GIF but nothing happens, other than it plays in a loop, even though the GIF isn't supposed to loop. But no URL change or anything.
Any help is much appreciated.
EDIT: the site now just doesn't load and goes directly to "unsafe website" message from browsers.
<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">
<script type="text/javascript" src="./libgif.js"></script>
</head>
<body>
<img id="taliAni" src="LogoAnimation2.gif" rel:animated_src="LogoAnimation2.gif"
rel:auto_play="1"/>
<script type="text/javascript">
var sup1 = new SuperGif({ gif: document.getElementById('taliAni') } );
sup1.on_end(window.location.href = "https://www.website.com/";);
</script>
</body>
</html>

I'am getting "[violation] avoiding using document write()" error when adding a body tag in html

when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!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>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!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>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue

Categories