I'm new with using JavaScript and my colleague introduced me to jQuery. Right now I'm testing how to utilize the variables I declare to create progress bars during runtime, and I can't figure out how I can create a <div> with its respective counter together with the CSS for animating the progress bar.
Please check variable counter2 as it is being treated as a string rather than its value inside.
I hope this make sense to everyone and thank you for checking this item.
function clickme2(){
var values1 = [40,30];
for (counter2 = 0; counter2 <= 1; counter2++) {
var css =$(".progressbar[counter2]{height: 20px; background: #4169E1; width: 0; text-align: center; border: 1px;} ")
$("head").append(css)
var div =$("<br> <p id = progressnum>this is a progress bar [counter2]</p><div class = 'pp'><div class='progressbar[counter2]'> </div></div>");
$("body").append(div);
$('.progressbar').animate(
{
width: values1[counter2] + "%"
},
{
duration: 500
}
);
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type='text/css'>
</style>
<body>
<br>
<button id="add" onclick="clickme2()">Add</button>
<br>
<script>
//refer to my javascript code
</script>
</body>
</html>
To use a variable in a string, you either have to concatenate it, or use a template literal. If you just stick it inside a string, it will be treated as a string, as that is how javascript is designed.
//concatenation
var x = 'me';
var aString = 'Please say hello to '+ x;
//template literal
var x = 'me';
var aString = `Please say hello to ${x}`;
Related
I am trying to get the source code(HTML code) of the current browser through a chrome extension. I was trying to store this HTML code in a string, but it doesn't seem to work.
http://jsfiddle.net/ufbxge08/2/
<head>
<style>
button {
height: 30px;
width: 100px;
outline: none;
}
</style>
</head>
<body>
<button id="bth1">Predict</button>
<script src="popup.js"></script>
<script src="jquery-2.0.3.js"></script>
<form>
<label id = 'mybtn1'></label>
</form>
JavaScript:
btn1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerHTML = htmlCode;
console.log(htmlCode)
}
I expected the code to store the source code in a string but it doesn't seem to work.
If you want to show HTML code inside an HTML element you may need to set the text content (innerText), not the HTML content (innerHTML):
bth1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerText = htmlCode;
}
http://jsfiddle.net/1jk94r50/
<html>
<head>
<title>BD Home page</title>
<style>
body { background-color:red; }
p { background-color:yellow; }
div { background-color:green; }
</style>
</head>
<body>
<script>
function mf() {
Var x = new Date();
alert("Today is: " + x);
}
</script>
<button onclick="mf()">Click</button>
<div>Hellllllooooo</div>
<p>Hello this is html</p>
</body>
</html>
Hello I am a beginner programmer. In the error code it says mf is not defined on line 1:1, cannot understand that. Is it important to enclose an alert dialog box under a function?
Use var instead of Var. Javascript var keyword must be simple letters
Remove Var before the x or replace it by var ("v" lowercase).
I am building a simple game as practice that counts the number of taps pressed in 3 seconds i have done everything apart from making it able to save the record score and if there is no record score then to show the old record.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript1.js"></script>
<link type="text/css" rel="stylesheet" href="firstcss.css">
</head>
</head>
<body>
<div id="div1">
<button onclick="myFunction()" id="something">GO
</button>
</div>
<div id="div2">
<p id="paragraph">0</p>
</div>
<p id="don"></p>
<p id="record"></p>
<p id="add"></p>
<script>
var cool = 1;
var red = 0;
function myFunction() {
document.getElementById("something").innerHTML = "Keep Tapping";
document.getElementById("paragraph").innerHTML = cool;
cool++;
var parent = document.getElementById("div1");
setTimeout(function() {
var ooo = cool - 1;
document.getElementById("don").innerHTML = ooo;
var parent = document.getElementById("div1");
var child = document.getElementById("something");
parent.removeChild(child);
var parent1 = document.getElementById("div2");
var child1 = document.getElementById("paragraph");
parent1.removeChild(child1);
if (cool - 1 > red) {
var red = cool - 1;
document.getElementById("record").innerHTML = red;
} else {
document.getElementById("record").innerHTML = red;
document.getElementById("add").innerHTML = red;
}
}, 3000);
}
</script>
</body>
</html>
I am using the if statement at the end but want to know how you would save the high score or if there isnt one to say the old high score. thanks it would be really helpful.
Check out the following resources on local storage:
http://diveintohtml5.info/storage.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
Essentially you can do (taken from the Dive int HTML 5 link):
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
I'm working on an assignment in which we need to use dom 2 in order to validate some user input, however I'm having a hard time just getting the basics. Between my professors accent and horrible writing its hard to make things out but this code I wrote up
<!DOCTYPE html>
<html>
<head>
<title>Form checking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
span{
visibility: hidden;
color: red;
}
</style>
<script>
function invalid(event){
var val = event.target.value;
var regex = /^\d{3}-\d{3}-\d{4}$/;
if(val.match(regex))
document.getElementById("error").style.visibility = hidden;
else
document.getElementById("error").style.visibility = visible;
}
</script>
</head>
<body>
<span id="error">Should be in form xxx-xxx-xxxx</span><br>
Phone Number: <input type="text" id="phoneNumber">
<script>
var pn = document.getElementById("phoneNumber");
pn.addEventListener("blur", invalid, false);
</script>
</body>
</html>
follows his notes exactly, or as close as I've been able to decipher, yet I can't even slightly get it to work let alone trying to do the assignment. Can someone please point out what is wrong with it? And please keep it simple I've only been taking the class for 2 weeks so I know next to nothing.
How's this: http://jsfiddle.net/6D2cJ/
You forgot to put quotes on the style visibility. It was expecting a variable but instead received nothing. Putting quotes around it makes a string.
Also, you forgot to add curly brackets for the if and else statement.
function invalid(event){
var val = event.target.value;
var regex = /^\d{3}-\d{3}-\d{4}$/;
if(val.match(regex)) {
document.getElementById("error").style.visibility = "hidden";
}
else {
document.getElementById("error").style.visibility = "visible";
}
}
Here you go.. fixed some syntax errors and other stuff:
function invalid(event){
var val = event.target.value;
var regex = /^\d{3}-\d{3}-\d{4}$/;
if(!val.match(regex)){
document.getElementById("error").style.visibility = 'visible';
} else {
document.getElementById("error").style.visibility = 'hidden';
}
}
var pn = document.getElementById("phoneNumber");
pn.addEventListener("blur", invalid, false);
Working demo:
http://jsfiddle.net/x84J2/24/
I am trying to read input got through autocomplete and display it as a alert. After accessing i get undefined as alert instead of the value accessed through labelinput.
The ex.js file is as follows
goog.require('goog.dom');
goog.require('goog.ui.LabelInput');
goog.require('goog.ui.ac');
goog.require('goog.events.EventType');
function autoComplete() {
var jobj = [{"cityname":"Bangalore","cityid":"1"},
{"cityname":"Bellary","cityid":"2"},
{"cityname":"Belgaum","cityid":"3"},
{"cityname":"Bidar","cityid":"4"},
{"cityname":"Mumbai","cityid":"5"},
{"cityname":"Munnar","cityid":"6"},
{"cityname":"Delhi","cityid":"7"},
{"cityname":"Diu/Daman","cityid":"8"}];
var li1 = new goog.ui.LabelInput("Enter City Name");
li1.render(goog.dom.getElement('d1'));
var array1 = new Array();
for (var i=0;i<jobj.length; i++)
{
array1[i] = jobj[i].cityname;
}
var ac2 = goog.ui.ac.createSimpleAutoComplete(
array1, goog.dom.getElement('d1'), false);
goog.events.listen(ac2,
goog.ui.ac.AutoComplete.EventType.UPDATE,
function() { var val2 = (goog.dom.getElement('d1').value);
alert(val2);
});
}
The ex.html file is as follows
<html>
<head>
<script src="../closure-library/closure/goog/base.js"></script> <!--My Closure Library Location -->
<script src="ex.js"></script>
</head>
<body onload="autoComplete();">
<style>
.ac-renderer {
position: absolute;
width: 300px;
background-color: #fff;
border: 1px solid;
}
</style>
<div id="d1">City   </div><br><br>
</body>
</html>
"goog.dom.getElement('d1')" will return a div element, which will not have a value. The LabelInput renders a control inside of that element when you call
li1.render(goog.dom.getElement('d1'));
You should be using the getValue method of the LabelInput class itself
li1.getValue()
or if you want to access the Input element created during the LabelInput render method, call
li1.getElement().value
Source : http://docs.closure-library.googlecode.com/git/class_goog_ui_LabelInput.html