I have make a small example in JSFiddle. It is correct, but now I want to put the content of that example in files in localhost in my computer. But I am having problems with including the .js file. It does not load. Please could you help me? What is the problem?
Here is my JSFiddle example: Click here
Here is my index.html file in local host :
<!DOCTYPE html>
<!--This is the first html page of the website-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is a simple example">
<meta name="keywords" content="multiple, add, substract">
<title>Tirana</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="icon" href="images/logo.png" type="image/png" sizes="40x35">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<div class="container">
<textarea id="input" name="Input1" cols="40" rows="5" placeholder="enter your input here">
number a =5
number b =7
sum = a+b
</textarea>
<input type="button" value="test" />
<textarea id="output" name="Output1" cols="40" rows="5" placeholder="output" readonly></textarea>
</div>
</body>
</html>
And I have use this to include the .js file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="codejs.js"></script>
Here is my codejs.js file:
$('input[type=button]').click(function () {
var result= "";
var lines = $('#input').val().split('\n');
for (var i = 0; i < lines.length; i++) {
result += lines[i];
result += "\n";
}
$("#output").html(result);
});
Please could you help me? Thanks in advance
What you are looking for is managing dependencies of js files. There are many possible options for that like using require library.
With respect to your code, the simplest way to address the problem is move your code in ready block.
$(document).ready(function(){
// move your code here
});
You can do what Nikhil is doing or you can do this.
You are Missing
$(function(){ // DOM IS NOW READY
/* YOUR CODE HERE */
});
jQuery docs .ready()
Try it like this for your code.
$(function(){
$('input[type=button]').click(function () {
var result= "";
var lines = $('#input').val().split('\n');
for (var i = 0; i < lines.length; i++) {
result += lines[i];
result += "\n";
}
$("#output").html(result);
});
});
Related
I'm totally lost as to where to begin here, how would I create a countdown button so that each time my button is clicked, it prints out the global variable and reduce it by 1 in the innerHTML and when it hits 0 it says BOOM?
I know I have to declare the variable outside but not sure what to do afterwards
JS:
var i = 20
function myFunction()
{
i = i--; // the value of i starting at 20
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
I tryed this code and works fine
var i = 20;
function myFunction() {
myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
myData.textContent = "BOOM!"
}
}
html code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var i = 20;
function myFunction() {
var myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {
myData.textContent = "BOOM!"
}
}
</script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
It's good practice to not inline JS in the HTML so I'll provide an extra example to show how to separate it out using a couple of DOM selection methods:
let count = 20;
// grab the element with the mydata id
const mydata = document.getElementById('mydata');
// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
if (count === 0) {
mydata.textContent = 'Boom';
} else {
mydata.textContent = count;
}
count--;
}
<body>
<p id="mydata">Countdown</p>
<button>Click</button>
<script src="task6.js" type="text/javascript"></script>
</body>
Reference
getElementById
querySelector
addEventListener
I'll assume you want to show the variable output and the BOOM at the <p id="mydata"> Count Down </p>, if I am mistaken correct me. So, something like this:
let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
i = i - 1;
myData.textContent = i;
if(i === 0) {
myData.textContent = "BOOM!"
}
}
You almost got it whole,only missed the textContent and if part. If this is what you wanted to achieve. If this isn't what you were looking for, hit me up so I can correct it. Cheers :)
You need some way of displaying the number inside of your variable. One of the simplist ways to do this would be to set text to your paragraph tag using getElementById() and inner HTML. For example, after running your deincrement, on the next line you would do something like...
function myFunction()
{
i = i--; // the value of i starting at 20
document.getElementById("mydata").innerHTML = i;
}
This code simply grabs your "mydata" paragraph from the DOM and injects the number into the tag as html.
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
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
I'm trying to create a range of numbers in a dropdown form using JavaScript.
However, it looks like
…and it does not show any options and clicking on the arrow does not pop up more options. I already checked that my path is correct.
I tried it in JSFiddle and it works but not when I put it in my HTML.
I'm going crazy on why this is not working.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
<script type="text/javascript" src="../assets/main.js"></script>
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length">
</select>
</div>
</body>
</html>
main.js
var select = document.getElementById('length');
for (var i = 0; i<= 24; i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
select.options.add(option);
}
The problem is that when main.js script is parsed and executed, there is no element with id length yet in DOM. The simplest solution is to move your script to the very end of body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length"></select>
</div>
<script type="text/javascript" src="../assets/main.js"></script>
</body>
</html>
The reason why it works in jsFiddle, is because it's configured so that script section is executed on window.onload event (in the right side-panel, dropdown "onLoad"). Of course, you could do the same, e.g. in main.js:
window.onload = function() { /* previous main.js code */};
In this case you would not need to move script anywhere.
I am creating some JSON on the fly, serializing it and saving it to the DB.
To run it, i create a script element, and load it that way.
Is there a way to load the script source to a textarea?
You don't "run" JSON, JSON is a data notation.
Yes, you can put the text of a script tag into a text area, something along these lines:
var script, tb, node;
script = document.getElementById('theScriptID');
tb = document.getElementById('theTextBoxID');
tb.innerHTML = script.innerHTML;
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script id='theScriptID' type='text/javascript'>
function go() {
var script, tb;
script = document.getElementById('theScriptID');
tb = document.getElementById('theTextBoxID');
tb.innerHTML = script.innerHTML;
}
</script>
</head>
<body>
<textarea id='theTextBoxID' rows='20' cols='70'></textarea>
<input type='button' id='btnGo' value='Go' onclick="return go();">
</body>
</html>