I'm a beginner, learning js. I was doing a course and the task provided was that to pop an alert when the button is clicked. Pretty Ez but everytime somehow the code just doesn't works even when I typed the code seeing the solution. Checked pretty much everything within my knowledge but couldn't figure it out. while trying the same thing in another computer, it worked without any problem :/Here's the code
Window.alert is not native JS. It is a Web API method, meaning your browser source code implements it.
If you're running, say, a Node.js environment in VSCode's console, then it shouldn't really work. Node doesn't implement it either.
I have made an example here on a code pen: https://codesandbox.io/s/buttontoalert-fs1kz3
What you need to do is create an index.html that is importing the script you want to run.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button>Click Me</button>
<script src="src/index.js"></script>
</body>
</html>
Then in your index.js file which is the script you are importing in the html file the code is:
const button = document.querySelector("button");
button.addEventListener("click", () => alert("I was clicked"));
These two file need to be in the same directory or you need to update the file path to where the js file is located relative to your html file.
The commands you are using a relative to a browser so need to be run with a browser or will not work.
Related
I have looked through many similar questions and tried several different solutions, but I do not understand what I am doing wrong. Examining the console did not help me either.
I am new, and am attempting to use Github pages, but cannot get my page to work. I created this in codepen, and it looked fine and functional there. I assume the issue is in how I am linking my CSS and JS to the HTML.
I tried changing my CSS and JS links several times to no avail. I have no idea what I am doing wrong. Any suggestions are greatly appreciated.
Here is my HTML code:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content="width=device-width, initial"
<title>Digital Clock:</title>
<link rel="stylesheet" type="text/css" href="/master/style.css">
</head>
<body style="background-color:#f28500;">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<div class="clock">
<h2><strong>XENA's sundial says:</strong></h1>
<span class="clock-time"></span>
<span class="clock-ampm"></span>
</div>
<script src="/master/digitalClock.js"></script>
</body>
</html>
Here is the link to my actual repo.
******************************************************////
******************************************************////\
UPDATE: I deleted all the above code and link. Please see my answer below for an explanation as to what happened as I somewhat solved the issue.
Urls starting with / mean start at the root folder, so you need to change it to be /YOURPROJECTNAMEHERE/restofurl where YOURPROJECTNAMEHERE is your project name and restofurl is the rest of the url
should be test your project on server by tools like live server
this package related to vscode ide
after install live server
then after run head over to browser in here test address as manual
explain address
example : where address file talk.ppt
./work/project/talk.ppt
and final step deploy in github
I have figured it out. For some reason, with the code being from codepen, you must export the code to use it, not just copy/paste it (as I had done). I am still unsure as to why I could not get it to work before, however, I deleted everything, and started with a fresh repo and freshly exported code straight from codepen. I did not alter any code. It worked. Previously I copy/pasted it. Further, I uploaded the files from the "src" folder from codepen. I hope this helps somebody in the future.
I have created simple custom elements in angular in one project and created bundle using npx-build-plus and generated files as shown in the picture below,
out of these files i took out main.js file.
I created another angular cli project and included generated js file in root folder like the below
and in index.html i used like this
<!doctype html>
<html lang="en">
<head>
<title>Custom Angular Element</title>
</head>
<body>
<script src="elements/main.f23021e9a099929ed5cb.js"></script>
<h1 id="result" style="text-align: center"> Angular elements !!!</h1>
<value-button text="Value Button" value="1"></value-button>
</body>
</html>
But the element is not displaying.
I tried to give in app component html also but not working there as well
Should i give any configuraration in package.json ? Can you please tell help me?
You can try following this article https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58
Also if try building it without an hash so that it is easy to always read that.Also you should be adding the custom element in the index.html (e.g. ).
The article talks about setting these things up in more detail.
Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.
Hello I'm trying to learn Angular.js and IntelliJ IDEA. I was wondering can someone tell me what I'm doing wrong. I'm trying to do a simple hello world example from a book, but it's not working for me in the IDE. I'm not sure whats really sure why it's not working, but to start the project I downloaded the AngularJS plugin. I went to the project location using the command line and did bower install angular, and copy and pasted the example from the ng-book for hello world, but it's not working for me. I tried to add the path to the html and it still didn't work. Can someone help me out?
you can see the working version of your work:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
</head>
<body ng-app="exampleModule">
<input ng-model="dynamicName" type="text" placeholder="write your name here">
<p>Hello {{dynamicName}} !</p>
<script>
angular.module('exampleModule', []);
</script>
</body>
</html>
I dont know is you address angular correctly or not, but you need a module for your code, even an empty one like what I've just put in the script tag.
Option 1 - Move the ng-app directive to body tag of the page.
Option 2 - It could be possible that browser is rendering a cached page which had errors. Can you force refresh to GET the latest files? In most modern browsers user CTRL+F5.
Option 3 - Use the developer panel of the browser and force reload the page and notice any error.
The problem is with the file read/write permissions on your localhost file.Go to the bower_components file in your finder, right-click ->get info. Scroll down in the info window to the permissions section and change sharing and permissions to Everyone - Read/Write.
Then click the Cog drop down and select the option Apply to enclosed items
Hope this helps.
You are trying to invoke the angular file from wrong path
replace with following
<script src="../bower_components/angular/angular.js"></script>
I'm using this one http://jonrohan.github.io/ZeroClipboard/
I spent this whole day figuring out how to use ZeroClipboard(ZC). I even read the instructions: https://github.com/jonrohan/ZeroClipboard/blob/master/docs/instructions.md
and followed it step by step and couldn't do it.
I tried again and again and again but I just can't get it to work. I even spent hours reading other guides at stackoverflow and other pages both just couldn't get this to work. Moreover, most of the answers are outdated.
Can anyone please write a simple working ZC code that copies a paragraph tag:
<p>Hello, I'm Armesh</p>
Then just tell me simply each part of the ZC code and why you wrote it that way.
I plan to use ZC to copy references generated by my generator: http://anonoz.com/armesh/
This is the code I wrote, all link references are correct:
<!DOCTYPE HTML>
<html>
<head>
<title>Zero Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="javascripts/ZeroClipboard.js"></script>
</head>
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "javascripts/ZeroClipboard.swf"
});
});
</script>
<body>
<button id='#copy_button' data-clipboard-target='to_copy'><b>Copy To Clipboard</b></button>
<p id='to_copy'>123456</p>
</body>
</html>
I also ran the code/web page above in Google Chrome, there are no errors log in the console. It's blank.
Ok I got it working, I also think the code posted above by me is correct.
The problem was that I was testing on local, and browsers usually prevent flash from running locally. This is what caused it to fail despite the code being correct.
As a last resort, I uploaded to my web server and tried online, it worked fine.
So, always test ZeroClipboard online after uploading it to your Web Server.
There is a Bug in your Code!
Look at the button id-attribute and delete the '#' !
And:
If u want more than 1 Clipboard Button on the current Page use the class attribute instead of id.
It works fine now! ;)
You can test ZeroClipboard locally by adding the port 3000.
e.g. http://localhost:3000