How to find a variable that is causing scope colision? - javascript

i just started a new html project as any other day, but totay i was suprised with scope colision in javascript. The point is i'm trying to declare a variable called top, but i think that i had already declared it in another file and i would like to know if there is a fast way to find this file and fix it.
This is my 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" />
<title>day one</title>
</head>
<body>
<h1>hiii</h1>
<script src="script.js"></script>
</body>
</html>
This is my javascript:
let top = [0, 0, 0]
When i open the devtools and look at the console there is an error message there: script.js:1 Uncaught SyntaxError: Identifier 'top' has already been declared (at script.js:1:1)
So i tried to console.log() the top variable and the output was the window
console.log(top)
// same thing as
console.log(window)
So i think that the best approach is trying to find original file where the top variable is, any ideas?
I don't know what to do ;-; HELP PLEASEEEE

top is a built in global property of the window. So you can't use it as a variable name when running in the browser:
https://developer.mozilla.org/en-US/docs/Web/API/Window/top.

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

Outputting "Click" to console on .addEventListener [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 months ago.
I am trying to output "click" to console whenever someone clicks the button on my webpage. It's a very simple webpage, it contains only a button with the ID "buttonn". This is my code. I am trying to use a lambda to define a console.log function. I am very much a beginner, please keep this in mind when explaining. This is the first im testing out of DOM manipulation. When I try to check the console output on Google Chrome, i receive this error message:
JavascriptCp.js:3 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at JavascriptCp.js:3:9
Is the code set up correctly? I am pretty sure it works, i have turned off every extension on chrome, but something tells me there may be some other problems with Chrome. I just want to rule out error from coding first. Thanks!
const button1 = document.getElementById("buttonn");
button1.addEventListener("click", () => {
console.log("Click!")});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="JavascriptCp.js"></script>
<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 type="button" id="buttonn"> Button!</button>
</body>
</html>
Ref. ChrisG response: The script tag came in before the buttons existence. Issue resolved

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.

external .js not working after using "parcel index.html"

So I have this site that im trying to make and I just keep running into the same error over and over again. When I double click on my index.html all the code below works fine but if I use "parcel index.html" in the console it says "Uncaught ReferenceError: test is not defined".
The HTML is:
<!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>Learn Ambivalendrish</title>
<link rel="stylesheet" href="/style/index.scss">
<script src="js/script.js"></script>
</head>
<body>
<h1 onclick="test()">This is a header for testing purpose</h1>
</body>
</html>
and my js is:
function test(){
alert('test alert')
}
I already tried doing
export function test(){
alert('test alert')
}
and
let test = () =>{
alert('test alert')
}
Module bundlers expect a script to be an entry point to the program.
Your problem is that you want the script to create a global variable and then read that global externally.
The bundler doesn't expect that so when it rewrites your script it doesn't take care to ensure that it creates a global variable with that name.
Rewrite your code so the script is the entry point.
Don't use intrinsic event attributes, bind the event handlers with addEventListener.
addEventListener('DOMContentLoaded' () => {
const heading = document.querySelector('h1');
heading.addEventListener(test);
});
Aside: Headings aren't designed to be interactive controls. By default: They don't react to the mouse passing over them. They don't look like things you can click on. Screen readers don't announce them as being interactive. You can't tab to them. If you want something to click on to trigger JS with, use a <button>.

Edge throws undefined error when accessing module variable through eval

I can't mimic this in a snippet, but use the following code to reproduce:
Windows 10 || Edge-version: 42.17134.1.0 || EdgeHTML: 17.17134
I'm using ES6-modules
import * as variable_name from 'file'
console.log(variable_name); //will return an [object module]
console.log(eval("variable_name")); //returns undefined error 'variable_name is not defined'
Chrome works fine this way.
SAMPLE HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="module" src="module.js"></script>
</body>
</html>
You define variable_name as a variable value so you should use it without quotation marks. Maybe the syntax rule is not so strict in Chrome so it works fine with quotation marks. You could modify it into console.log(eval(variable_name));, then it can work well in both Edge and Chrome.

Categories