I wan't to inject a .css on a page by clicking a button on my extensions!
Here is the popup.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/popup.css">
<script type="text/javascript" src="black.js"></script>
<script type="text/javascript" src="white.js"></script>
</head>
<body style="width: 400px">
<h1>test v1.0.0</h1>
<hr ></hr>
<input type="button" onclick="black" value="Black"/>
<input type="button" onclick="white" value="White"/>
</body>
</html>
And here is the black.js (white.js is almost the same):
function black() {
var browserListener = function(tab) {
chrome.tabs.insertCSS(tab.id, {
file: "css/black.css"
});
}
}
I don't know why but it's not working.
You can also try:
var blackCss = document.createElement('link');
blackCss.src = "css/black.ss";
blackCss.rel = "stylesheet";
document.head.appendChild(blackCss);
Of course, you can wrap that in a function and make the src path dynamic.
There are lots of ways of doing this literally LOTS ive come up with 1 solution but now that i think of it its probably not best but it works.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>test v1.0.0</h1>
<input id="black" type="button" value="Black"/>
<input id="blue" type="button" value="Blue"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function(){
$('#black').on('click', function(){
var location = 'black.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
$('#blue').on('click', function(){
var location = 'blue.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
})();
</script>
</body>
</html>
You could go so much further with this and make it 1 function that just changes the value of the href tag on the css link. but this also works fine. I wouldn't recommend using this exact code but im hoping you get what im trying to show here
Related
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
I'm just starting out in Javascript, and I'm trying to put my scripts in a separate file. They work just fine when they're in the html file, but as soon as I move them to their own separate file it stops working.
Here's my html file:
<!DOCTYPE html>
<head>
<meta lang = "en">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<script src="js/script1.js"></script>
<title>Web Dev Practice</title>
</head>
<body>
<h1>First JavaScript Example</h1>
<button type="button" onclick="changeText()">ClickMe!</button>
<p id="demo">This is just a test.</p>
</br>
</br>
<h1>Second JavaScript Example</h1>
<img id="lightBulb" onclick="changeImage()" src="res/img/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn it on or off.</p>
</body>
</html>
And here's my js file:
<script>
function changeText(){
var string_first = "This is just a test.";
var string_second = "Woah, it actually works!";
if(document.getElementById("demo").innerHTML == string_first){
document.getElementById("demo").innerHTML = string_second;
} else{
document.getElementById("demo").innerHTML = string_first;
}
}
<script>
function changeImage(){
var image = document.getElementById('lightBulb');
if(image.src.match("bulbon")){
image.src = "res/img/pic_bulboff.gif";
}
else{
image.src = "res/img/pic_bulbon.gif";
}
}
</script>
The <script> tags are html things, not javascript, so you don't need (and can't have) them in your external files. What browser are you using? Many have a built in console that can help you see what errors, if any, your page is throwing.
If I wrote the script code in my html file, the animation works. But if the animation code is in a js file, it just didn't work.
here is my animation code
$(document).ready(function(){
$(window).on("load", function() {
var cow = document.getElementsByTagName("cow");
TweenMax.to(cow, 2, {top:"1200px",ease: Back.easeOut});
}
)})
and here is what in the html file.
<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' type = 'text/css' href = 'cow.css'/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
</script>
<script type="text/javascript" src = 'showanimationcow.js'></script>
</head>
<body>
<img id = "cow" src ="http://cdn.snappages.com/adwr7m/theme/338649/images/
13179326871659847108SimpleCowArt.svg.hi_1393086508.png">
</body>
I will very much appreciate your help!
You have to use document.getElementById("cow")
Also, it's not necessary to call $(document).ready and $(window).on("load",function() { the same time.
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...