How to run JavaScript in WebStorm - javascript

I'm new at this so apologies in advance if I'm missing something obvious, but I'm not able to figure out how to run JavaScript in WebStorm. The WebStorm documentation says to simply open the HTML file in the browser, but that doesn't seem to work. For what it's worth, everything is working up on codepen.io.
Here's the HTML (for a simple weather app):
<body>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<div class="container-fluid">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<div class="white-box text-center">
<span>Weather where you are:</span>
<div class="loc"></div>
<div class="weather"></div>
<div class="temp"></div>
<br>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</body>
And here's the script (still in draft, as it needs to be expanded to, among other things, link to images covering all values for 'weather'):
$(document).ready(function() {
$( window ).on("load", function(){
$.getJSON("http://ip-api.com/json", function(json) {
var json;
json = JSON.stringify(json);
var obj = JSON.parse(json);
var latitude = obj.lat;
var longitude = obj.lon;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&lon="+longitude+"&appid=74a6725c2ca6f1342464bb9005bf0b63", function(json) {
var json;
json = JSON.stringify(json);
var obj = JSON.parse(json);
var loc = obj.name;
var weather = obj.weather[0].description;
var tempInCelsius = obj.main.temp - 273.15;
var tempInCelsiusString = tempInCelsius.toFixed(1) + " &#8451";
var tempInFahrenheit = obj.main.temp * 9/5 - 459.67;
var tempInFahrenheitString = tempInFahrenheit.toFixed(1) + " &#8457";
var tempStringCombined = tempInCelsiusString + " | " + tempInFahrenheitString;
$(".loc").html(loc);
if(weather === "haze"){
weather = "<img src='https://cdn3.iconfinder.com/data/icons/chubby-weather/440/fog-512.png'>";
}
$(".weather").html(weather);
$(".temp").html(tempStringCombined);
});
});
});
});
Many thanks in advance for any help!

Select the tab of html file(say index.html), and click in the menu Run > Run... and select index.html.

Related

Why does the browser create two pieces of div in html but when the code just says one?

I'm working on javascript a bit and have had some problems I do not understand how to solve. In my HTML code, I only have a id="felt" but as soon as I open the page in my browser, it creates two pieces of id="felt" (please see attached image for more understanding: https://imgur.com/7ACU7vt) It seems Do not be wrong with the writing of the html code, there is something that makes id="felt" created twice in the browser and I can't understand why. The second id="felt" is working but the first one is not working.
codepen: https://codepen.io/tommattias/pen/yjYoEQ
Thanks for your help!!
HTML
<html>
<head>
<title>JavaScript Card Game | The Art of Web</title>
<link rel="stylesheet" type="text/css" href="css-animation.css">
</head>
<body>
<div id="stage">
<div id="felt">
<div id="card_0"><img onclick="cardClick(0);" src="back.png"></div>
<div id="card_1"><img onclick="cardClick(1);" src="back.png"></div>
<div id="card_2"><img onclick="cardClick(2);" src="back.png"></div>
<div id="card_3"><img onclick="cardClick(3);" src="back.png"></div>
<div id="card_4"><img onclick="cardClick(4);" src="back.png"></div>
<div id="card_5"><img onclick="cardClick(5);" src="back.png"></div>
<div id="card_6"><img onclick="cardClick(6);" src="back.png"></div>
<div id="card_7"><img onclick="cardClick(7);" src="back.png"></div>
<div id="card_8"><img onclick="cardClick(8);" src="back.png"></div>
<div id="card_9"><img onclick="cardClick(9);" src="back.png"></div>
<div id="card_10"><img onclick="cardClick(10);" src="back.png"></div>
<div id="card_11"><img onclick="cardClick(11);" src="back.png"></div>
<div id="card_12"><img onclick="cardClick(12);" src="back.png"></div>
<div id="card_13"><img onclick="cardClick(13);" src="back.png"></div>
<div id="card_14"><img onclick="cardClick(14);" src="back.png"></div>
<div id="card_15"><img onclick="cardClick(15);" src="back.png"></div>
</div>
</div>
<script type="text/javascript" src="css-animation2.js"></script>
<script type="text/javascript">
var game = new CardGame("stage");
</script>
</body>
</html>
Javascript:
var CardGame = function(targetId)
{
var cards = []
var card_value =
["1C","2C","3C","4C","5C","6C","7C","8C","1H","2H","3H","4H","5H","6H","7H","8H"];
var started = false;
var matches_found = 0;
var card1 = false, card2 = false;
var moveToPlace = function(id) // deal card
{
cards[id].matched = false;
with(cards[id].style) {
zIndex = "1000";
top = cards[id].fromtop + "px";
left = cards[id].fromleft + "px";
WebkitTransform = MozTransform = OTransform = msTransform =
"rotate(60deg)";
zIndex = "0";
}
};
var cardClick = function(id)
{
if(started)
{
showCard(id);
}
else {
// shuffle and deal cards
card_value.sort(function() { return Math.round(Math.random()) - 0.5;
});
for(i=0; i < 16; i++)
{
(function(idx)
{
setTimeout(
function()
{
moveToPlace(idx);
}, idx * 100);
})(i);
}
started = true;
}
};
// initialise
var stage = document.getElementById(targetId);
var felt = document.createElement("div");
felt.id = "felt";
stage.appendChild(felt);
// template for card
var card = document.createElement("div");
card.innerHTML = "<img src=\'back.png\'>";
for(var i=0; i < 16; i++) {
var newCard = card.cloneNode(true);
newCard.fromtop = 15 + 120 * Math.floor(i/4);
newCard.fromleft = 70 + 100 * (i%4);
(function(idx) {
newCard.addEventListener("click", function() { cardClick(idx); },
false);
})(i);
felt.appendChild(newCard);
cards.push(newCard);
}
}
EDIT: When i open my browser, i get like this picture shows
https://imgur.com/7ACU7vt the one who has the text "Not working" should not show up. When i open programmer tool i can se that under id="stage", id="felt" creates two times and thats why I have one working and other one not working. My question is why does i get two id="felt" when my code only say one?
It is already existing in your html, and then within the script you create it again. You cannot have 2 different elements with the same id. Remove it from the html and see my comment

Toggle button works in one direction only

My toggle button logic (the last code block in under the <script> tag) only seems to work in one direction. Specifically, the temperature, temp, variable arrives at this section of code in Celsius. On button click, everything successfully converts to Fahrenheit, but then the button stops working. Note, I tried an alternate design using closures, embedding everything in the updateTemp function, changing the button's id with every click, and axing the top two variables under $(document).ready. It was a mess and still didn't provide the toggle functionality I was looking for. Thoughts?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- CSS -->
<!-- JS/JQ -->
<script>
$(document).ready(function () {
var tempType = 0;
var temp = 0;
var coords = {
lat: 0,
lon: 0
};
// retrieve and set user's latitude and longitude coordinates
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
coords.lon = position.coords.longitude;
coords.lat = position.coords.latitude;
// AJAX called here b/c getCurrentPosition is asynchronous
sendAJAX(coords);
});
} else {
alert("Sorry, I couldn't locate you. Here's the weather elsewhere.");
coords.lon = 48.8566;
coords.lat = 2.3522;
sendAJAX(coords);
}
// AJAX request and settings wrapped in fxn for ease of calling within if/else
function sendAJAX (coords) {
// enumerate AJAX request settings & pass in coordinate settings
var ajaxOptions = {
crossDomain:true,
dataType:"json",
url:"https://fcc-weather-api.glitch.me/api/current?",
data: {
lon:coords.lon,
lat:coords.lat
},
method:"GET"
};
// attached .done() fxn calls used here, as they rely on the JSON file returned by the AJAX request
$.ajax(ajaxOptions).done(updateCity).done(updateIcon).done(updateDesc).done(updateTemp).done(updateHumid).done(updateWind);
}
// update weather icon on page
function updateCity (json) {
var cityHTML = "";
cityHTML += json.name + ", " + json.sys.country;
$("#city").html(cityHTML);
}
// update weather icon on page
function updateIcon (json) {
var iconHTML = "";
iconHTML += "<img src='" + json.weather[0].icon + "'";
iconHTML += "alt='weather icon'>";
$("#icon").html(iconHTML);
}
// update description of weather on page
function updateDesc (json) {
var descHTML = "";
var desc = json.weather[0].main;
descHTML += desc;
$("#descript").html(descHTML);
changeImage(desc);
}
// update temperature
function updateTemp (json) {
var tempHTML = "";
// the 0x in front of the character code matters, no truncation allowed despite what some docs might seem to suggest
temp = Math.round(json.main.temp);
var degree = String.fromCharCode(0x2103);
tempHTML += temp + degree;
$("#temp").html(tempHTML);
}
// update humidity
function updateHumid (json) {
var humidHTML = "";
var percent = String.fromCharCode(0x0025);
humidHTML += json.main.humidity + percent;
$("#humidity").html(humidHTML);
}
// update wind speed
function updateWind (json) {
var windHTML = "";
windHTML += json.wind.speed + " knots";
$("#wind").html(windHTML);
}
// change background image
function changeImage (desc) {
if (desc.match(/Clear/)) {
$("body").css("background-image", "url(img/clear.jpg)");
} else if (desc.match(/Rain/)) {
$("body").css("background-image", "url(img/rain.jpg)");
} else if (desc.match(/Haze/)) {
$("body").css("background-image", "url(img/haze.jpg)");
} else if (desc.match(/Clouds/)) {
$("body").css("background-image", "url(img/cloudy.jpg)");
} else if (desc.match(/Snow/)) {
$("body").css("background-image", "url(img/snow.jpg)");
} else {
$("body").css("background-image", "url(img/default.jpg)");
}
}
// toggle button logic
if (tempType == "0") {
$("#convert").on("click", function () {
var fahrenheit = Math.round((9/5)*(temp) + 32);
var tempFarHTML = "";
var degree = String.fromCharCode(0x2109);
tempFarHTML += fahrenheit + degree;
$("#temp").html(tempFarHTML);
$("#convert").html("Convert to Celsius");
tempType == "1";
});
} else {
$("#convert").on("click", function () {
var celsius = temp;
var tempCelsiusHTML = "";
var degree = String.fromCharCode(0x2103);
tempCelsiusHTML += celsius + degree;
$("#temp").html(tempCelsiusHTML);
$("#convert").html("Convert to Celsius");
tempType == "0";
});
}
});
</script>
<title>Local Weather</title>
</head>
<body>
<div class="container">
<div class="row text-center">
<div id="page-title" class="col-md-12">
The Local Weather
</div>
</div>
<div class="row text-center">
<div id="city" class="col-md-12">
City
</div>
</div>
<div class="row text-center">
<h2>Current Conditions</h2>
<div id="icon" class="col-md-12 img-responsive">
Icon
</div>
<div id="descript" class="col-md-12">
Desc
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h2>Temperature</h2>
</div>
<div class="col-md-4">
<h2>Humidity</h2>
</div>
<div class="col-md-4">
<h2>Wind</h2>
</div>
</div>
<div class="row text-center">
<div id="temp" class="col-md-4">
Temp
</div>
<div id="humidity" class="col-md-4">
Humid
</div>
<div id="wind" class="col-md-4">
Wind
</div>
</div>
<div class="row text-center">
<div id="temp" class="col-md-4">
<button id="convert" class="btn btn-default">Convert to Fahrenheit</button>
</div>
</div>
</div>
</body>
</html>
The condition should be checked inside of the function as follows:
// toggle button logic
$("#convert").on("click", function () {
if (tempType == "0") {
var fahrenheit = Math.round((9/5)*(temp) + 32);
var tempFarHTML = "";
var degree = String.fromCharCode(0x2109);
tempFarHTML += fahrenheit + degree;
$("#temp").html(tempFarHTML);
$("#convert").html("Convert to Celsius");
tempType == "1";
temp = fahrenheit;
} else {
var celsius = temp;
var tempCelsiusHTML = "";
var degree = String.fromCharCode(0x2103);
tempCelsiusHTML += celsius + degree;
$("#temp").html(tempCelsiusHTML);
$("#convert").html("Convert to Celsius");
tempType == "0";
temp = celsius
});
});
Also, as mentioned by #gavgrif in a comment on the question, there is a duplicate id "temp", which should be corrected.
Instead of
tempType == "1";
I think you're looking for one equal sign
tempType = "1";
When your page is loaded, your tempType is 0 and on click event is registered on your convert div to change the value to farenheit.
When the onClick event is triggered and your conversion works for the first time, however your onClick event doesn't change as your page isn't loaded again and your onClick event stays the same even though your tempType is set to 1. You need to change the way you try to solve your problem, you must reload the whole page or make a function that changes your onClick event, and assign it to your button, however that is not a good practice and would be considered to be an anti-pattern. The best approach would be to move the if-else condition inside the onClick event.

how to randomize multiple images in javascript

i am pretty new to javascript (a little over 2 months into my studies) and am starting my first project. the end goal is to have a set of baseball team logo images (right now 6 images but eventually i would like to expand this to more) randomized every time a button is clicked. i had researched on how to do this and came across the fisher yates algorithm used in a while loop, and various uses of random number generation. decided to use the fisher yates.
at the moment, my code seems to work. i followed 1 image and i couldn't see a specific pattern. my other concerns are if i can achieve the same functionality using 1 loop and also cleaning up my code so its not so repetitive.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sports</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1>Sports Random</h1>
<br>
<div class="row">
<div class="col-sm-2"> <img id="team1"src="images\sports\team1.jpg" alt=""></div>
<div class="col-sm-2"> <img id="team2"src="images\sports\team2.jpg" alt=""></div>
<div class="col-sm-2"> <img id="team3"src="images\sports\team3.jpg" alt=""></div>
<div class="col-sm-2"> <img id="team4"src="images\sports\team4.jpg" alt=""></div>
<div class="col-sm-2"> <img id="team5"src="images\sports\team5.jpg" alt=""></div>
<div class="col-sm-2"> <img id="team6"src="images\sports\team6.jpg" alt=""></div>
</div>
<br>
<button id="button">Random</button>
<button id="reset">Reset</button>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
var button = document.getElementById("button");
var reset = document.getElementById("reset");
var team1 = document.getElementById("team1");
var team2 = document.getElementById("team2");
var team3 = document.getElementById("team3");
var team4 = document.getElementById("team4");
var team5 = document.getElementById("team5");
var team6 = document.getElementById("team6");
var pics = ["team1.jpg", "team2.jpg", "team3.jpg", "team4.jpg", "team5.jpg", "team6.jpg"];
var teams = [team1, team2, team3, team4, team5, team6];
button.addEventListener("click", function random() {
var i = pics.length,
rNum, temp;
// shuffle pictures using fisher yates
while (--i > 0) {
rNum = Math.floor(Math.random() * (i + 1));
temp = pics[rNum];
pics[rNum] = pics[i];
pics[i] = temp;
}
// display images
for (var i = 0; i < teams.length; i++) {
teams[i].src = "images\\sports\\" + pics[i];
}
});
reset.addEventListener("click", function reset() {
team1.src = "images\\sports\\team1.jpg";
team2.src = "images\\sports\\team2.jpg";
team3.src = "images\\sports\\team3.jpg";
team4.src = "images\\sports\\team4.jpg";
team5.src = "images\\sports\\team5.jpg";
team6.src = "images\\sports\\team6.jpg";
});
Just add an id to the div class="row" id="parent">
and replace the code like this.
var button = document.getElementById("button");
var reset = document.getElementById("reset");
var originalChildren =
Array.from(document.getElementById("parent").children);
button.addEventListener("click", function random() {
var list = document.getElementById("parent");
for (var i = list.children.length; i >= 0; i--) {
list.appendChild(list.children[Math.random() * i | 0]);
}
});
reset.addEventListener("click", function reset() {
document.getElementById("parent").innerHTML = "";
for (var i =0 ; i< originalChildren.length; i++) {
document.getElementById("parent").appendChild(originalChildren[i]);
}
});
Additionally, I would also suggest creating the children dynamically then appending them to parent instead of putting them in HTML. But, this is entirely up to you. Modified the code so you don't have to keep the elements in JS side.
Here is a Fiddle that might help you:
https://jsfiddle.net/yha6r5sy/1/
You can use list.children to add it to main div

JavaScript updating a global variable

I am currently not the most experienced in Javascript and I'm trying to learn bit by bit. Anyway... how do I update the balance variable more efficiently?
Currently I believe I am doing this wrong. Also my button does not work on click event.
Anything would be a massive help! Thank you.
// Set global variables
var name;
var balance;
var weed;
// Ask the user his name for his character
name = window.prompt("What is your name?", "Cap'n Grow");
var finalName = document.getElementById('name');
finalName.textContent = name;
// Set the balance to default
balance = 100;
var FinalBalance = document.getElementById('balance');
FinalBalance.textContent = balance;
// Set the balance of weed to default
weed = 10;
var FinalWeed = document.getElementById('gear');
FinalWeed.textContent = weed;
// Sell function
function sellGear() {
var check = window.prompt("Are you sure you want to sell 5 bags?", "Yes");
if (check === 'Yes' && weed >= 5) {
console.log("Transaction was successful!");
// Update the balance
var updBalance = document.getElementById('balance');
updBalance.textContent = balance + 150;
} else {
console.log("Failed!")
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<div class="dashboard">
<div id="name"></div>
<div id="balance"></div>
<div id="gear"></div>
<div id="sell">
<button id="sellButton" onlick="sellGear()">Sell?</button>
</div>
</div>
</header>
</div>
</body>
<script src="js/global.js"></script>
</html>
Here is the solution and a suggestion:
Try to use java script code at the end of your HTML.
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<div class="dashboard">
<div id="name"></div>
<div id="balance"></div>
<div id="gear"></div>
<div id="sell">
<button id="sellButton" onclick="return sellGear();">Sell?</button>
</div>
</div>
</header>
</div>
</body>
<script src="js/global.js"></script>
</html>
<SCRIPT>
// Set global variables
var name;
var balance;
var weed;
// Ask the user his name for his character
var name = window.prompt("What is your name?", "Cap'n Grow");
var finalName = document.getElementById('name');
finalName.textContent = name;
// Set the balance to default
var balance = 100;
var FinalBalance = document.getElementById('balance');
FinalBalance.textContent = balance;
var weed = 10;
var FinalWeed = document.getElementById('gear');
FinalWeed.textContent = weed;
// Sell function
function sellGear() {
var check = window.prompt("Are you sure you want to sell 5 bags?", "Yes");
if (check === 'Yes' && weed >= 5) {
console.log("Transaction was successful!");
// Update the balance
var updBalance = document.getElementById('balance');
updBalance.textContent = balance + 150;
} else {
console.log("Failed!")
}
}
</SCRIPT>

Issue trying to get website to work - possible issue with my html code?

SO I have code that I'm trying to implement from my jsfiddle into an actual working website/mini-app. I've registered the domain name and procured the hosting via siteground, and I've even uploaded the files via ftp so I'm almost there...
But I'm thinking there's something wrong with my HTML code or JS code or how I implemented my JS code into my HTML code, because all of the HTML and CSS elements are present, but the javascript functionality is absent.
Here is my fiddle:
jsfiddle
^^ Click on start to see the display in action (which doesn't work in the actual website, which leads me to believe there's an issue with my JS file - whether it be code-related or whether that's because I integrated the file incorrectly) (or maybe even uploaded to the server incorrectly, perhaps?)...
And here is the actual site:
http://www.abveaspirations.com/index.html
And here's my HTML code uploaded to the server via FTP:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id='frame'>
<div id='display'>
<h1 id='output'></h1>
</div>
</div>
<div class="spacer">
</div>
<div id="main"> <!-- 11main -->
<h1 id='consoleTitle'>Control Board</h1>
<h5 id='consoleSub'><i>Double-click on an entry to remove. And add entries to your heart's desire...</i></h5>
<div id="controlbox"> <!-- ##controlbox -->
<div id="controlpanel"></div>
<div class="spacer"></div>
<div id="formula"> <!--formula -->
<form id="frm" method="post">
<input id="txt" type="text" placeholder="Insert your own entry here..." name="text">
<input id='submitBtn' type="submit" value="Start">
<input id='stop' type="button" value="Stop">
<select id="load1">
<option id='pre0' value="Preset 0">Preset 0</option>
<option id='pre1' value="Preset 1">Preset 1</option>
<option id='pre2' value="Preset 2">Preset 2</option>
</select>
<!-- These are for buttons as opposed to OPTION...
<input id="load" type="button" value="Preset 1">
<input id="load2" type="button" value="Preset 2"-->
</form>
</div> <!-- formula -->
</div> <!-- ##controlbox -->
</div> <!-- 11main -->
</body>
And my JS code, also uploaded to server via FTP (I didn't include the accompanying CSS file, but if that would help, I can provide ):
$(document).ready(function () {
var txtBox = $('#txt');
var frm = $('#frm');
var output = $('#output');
var subBtn = $('#submitBtn');
var stopBtn = $('#stop');
var loadBtn = $('#load');
var loadBtn2 = $('#load2');
var loadBtnA = $('#load1');
var pre0 = $('#pre0');
var pre1 = $('#pre1');
var pre2 = $('#pre2');
var txt = $('#display');
var preset1 = ["1", "2", "3"];
var preset2 = ["a", "b", "c"];
var container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
var console = $('#controlpanel');
var oldHandle;
function loadPreset0() {
container = [];
console.empty();
container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
updateConsole();
};
function loadPreset1() {
container = [];
console.empty();
container = preset1;
updateConsole();
};
function loadPreset2() {
container = [];
console.empty();
container = preset2;
updateConsole();
};
$(pre0).data('onselect', function() {
loadPreset0();
});
$(pre1).data('onselect', function() {
loadPreset1();
});
$(pre2).data('onselect', function() {
loadPreset2();
});
$(document).on('change', 'select', function(e) {
var selected = $(this).find('option:selected'),
handler = selected.data('onselect');
if ( typeof handler == 'function' ) {
handler.call(selected, e);
}
});
function updateConsole() {
for (var z = 0; z < container.length; z++) {
var resultC = container[z];
var $initialEntry = $('<p>' + '- ' + resultC + '</p>');
console.append($initialEntry);
};
};
updateConsole();
frm.submit(function (event) {
event.preventDefault();
if (txtBox.val() != '') {
var result = txtBox.val();
container.push(result); //1.
var resultB = container[container.length-1];
var $entry = $('<p>' + '- ' + resultB + '</p>');
console.append($entry); //2.
}
var options = {
duration: 5000,
rearrangeDuration: 1000,
effect: 'random',
centered: true
};
stopTextualizer();
txt.textualizer(container, options);
txt.textualizer('start');
txtBox.val('');
});
$("#controlbox").on('dblclick', 'p', function() {
var $entry = $(this);
container.splice($entry.index(), 1);
$entry.remove();
});
function stopTextualizer(){
txt.textualizer('stop');
txt.textualizer('destroy');
}
$(stopBtn).click(function() {
stopTextualizer();
});
});
Any help would be appreciated. I guess I'm just not sure what to do after uploading the html file to the server via ftp. Or maybe I did that correctly and there's something wrong with my code that I'm overlooking. Basically I'm lost. So help please!
You forgot to load jQuery. Make sure that you use <script src="../path-to-jquery/jquery.js"></script> before you load your script.js script.
Also, I noticed that you're loading your scripts in the head tag. This is bad practice, load them right before </body>.
I believe your site is missing jQuery. Add this to the top of your code to hotlink to google's jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Categories

Resources