Please help as this is doing my head in. My scripting skills are basic but I learn quickly.
I have HTML code that runs a java script on an external website and displays a table.
In my case it is a football leagues upcoming fixtures. I want to display this table using the code on our clubs website but I only want it to show certain lines of the table, ie only the matches that include the 2 teams from our club which is Watford Ladies FC.
Is there a way to either modify this script to hide certain lines or another script to extract certain lines and populate into another table?
The code I have to work with is:
<div id="lrep509554198" style="width: 350px;">Data loading....click here for Under 15's Division Two<br/><br/>FULL-TIME Home</div>
<script language="javascript" type="text/javascript">
var lrcode = '509554198'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
Unfortunately it requires you to allow unsafe script so it wont generate properly here.
If you copy the code into a HTML file and load into IE, allow scripts, youll see the table.
Many Thanks
Mark
Try adding this script to your html,
<div id="lrep509554198" style="width: 350px;">Data loading....click here for Under 15's Division Two<br/><br/>FULL-TIME Home</div>
<script language="javascript" type="text/javascript">
var lrcode = '509554198'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
<script type="text/javascript">
function load() {
var trElements = document.getElementsByTagName('tr');
var trsWithMatch = new Array();
for (i = 0; i < trElements.length; i++) {
var innerChildr = trElements[i].innerHTML;
if(innerChildr.indexOf('Watford Ladies Wasps') == -1) {
trsWithMatch.push(i);
}
}
if(trsWithMatch.length != 0) {
for (i = 0; i < trsWithMatch.length; i++) {
var indexFor = trsWithMatch[i];
var trMatched = trElements[indexFor];
trMatched.style.display = "none";
}
}
}
window.onload = load;
</script>
Related
I have downloaded some JavaScript code which creates a credit card paydown graph with and without overpayment. This code has fixed variables.
I would like to add HTML inputs for the user submit, however the script is connecting to a remote reference so I'm struggling to add a function to connect the script to HTML. Can HTML inputs be incorporated, if so, how?
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js">
</script>
<script type="text/javascript" src="https://www.moneymage.net/mm.min.js"></script>
<div id="creditcard-interest-chart"></div>
<!--want to add input variables here-->
<script type="text/javascript">
//preventing me adding function below...
moneymage.ready(() => {
//fixed variables below...
var creditCardBalance = 5500;
var interestRate = 19.5 / 100.0;
var minimumMonthlyRepaymentPercent = 2.5 / 100.0;
var minimumMonthlyRepaymentFixed = 15.0;
var optionalMonthlyRepaymentOverAndAboveMinimum = 175;
var months = 25 * 12;
moneymage.createCreditCardInterestChart(creditCardBalance,
interestRate,
minimumMonthlyRepaymentPercent,
minimumMonthlyRepaymentFixed,
optionalMonthlyRepaymentOverAndAboveMinimum,
months,
"creditcard-interest-chart");
});
</script>
</body>
If you are waiting for user input you probably don't need to wait for moneymage to be ready, so you can just trigger the moneymage.createCreditCardInterestChart on a submit function for a form with the inputs you want.
This example would be the general idea to get you started: https://codesandbox.io/s/compassionate-night-sl156?file=/index.html
So, I want to make a program that will be able to get user data(a ton of bug names separated by commas), go through, get data for each one, then display all of that data in a table. I have been through rewriting this like 5 times and still nothing happens. Anyone know what is wrong with this code?
My html code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Bugs</h1>
<p>In the area below, type in each of the insects you want information
about, seperate them with a comma.</p>
<textarea id="insects"></textarea>
<br>
<button type="button" id="go">Find out!</button>
<br>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
document.getElementById('go').onclick = function() {
var input = document.getElementById('insects').value;
var splitted = input.split(',');
for (i = 0; i<splitted.length; i++) {
var bug1 = splitted[i];
var part1 = // I need to assign it to bug1 without any whitespace
var finish = part1.toLowerCase();
find1(bug1);
}
}
function find1(bug) {
var xmlDocument = $.parseXML("externalfile:drive-77136639a78ffb21e72c7c4dfe7f7bb73604aeb3/root/Bugs/bugs.xml");
var pain = $(xmlDocument).find("value[type='" + bug + "'] pain").text();
alert(pain); <!-- This is to see if it works -->
}
</script>
</body>
Here is my XML code(btw the XML file is called bugs.xml and yes they are in the same exact folder in My Drive/Bugs:
<?xml version="1.0" encoding="UTF-8"?>
<bugs>
<bug type="blisterbeetle">
<name>Blister Beetle</name>
<pain>55</pain>
<conservation></conservation>
<habitat></habitat>
<rarity></rarity>
<class></class>
<order></order>
<family></family>
<species></species>
<dangerous></dangerous>
<external></external>
</bug>
</bugs>
I'm trying to convert a project to use requirejs instead of the solution I have below. Currently I have a layout page that contains all of the scripts at the bottom of the page (except modernizr) before the tag like this:
<head>
<script src="#Links.Assets.Scripts.Libraries.modernizr_2_6_2_js"></script>
</head>
<body>
<!-- Page content goes here -->
#RenderSection("PreScripts", false)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="#Links.Assets.Scripts.Libraries.jquery_1_9_1_min_js"><\/script>')</script>
<script src="#Links.Assets.Scripts.Libraries.jquery_namespace_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_unobtrusive_ajax_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_validate_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_validate_unobtrusive_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_timeago_js"></script>
<script src="#Links.Assets.Scripts.Libraries.toastr_js"></script>
<script src="#Links.Assets.Scripts.Views.Shared._master_js"></script>
#RenderSection("PostScripts", false)
#{
var errorMessage = TempData[TempDataConstants.ErrorMessage] as string;
var infoMessage = TempData[TempDataConstants.InfoMessage] as string;
var successMessage = TempData[TempDataConstants.SuccessMessage] as string;
if (!string.IsNullOrEmpty(errorMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.error(#Html.Raw(Json.Encode(errorMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
if (!string.IsNullOrEmpty(successMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.success(#Html.Raw(Json.Encode(successMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
if (!string.IsNullOrEmpty(infoMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.info(#Html.Raw(Json.Encode(infoMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
}
</body>
In the individual pages that use this layout page I then populate the PostScripts section:
#section PostScripts {
// Javascript that belongs to a single page goes here.
}
Problems
I've followed this example but as you can see where I'm checking TempData on the server to see if its not null to popup a toastr message on the client. I"m not really sure the best way to go about doing this and have tried many things. Any ideas?
I wrote a code in jquery. I was not running initially, then i checked online jslint for syntax errors. I caught some errors. Now still the code was not working as expected. So i went for firebug. I haven't done a lot of debugging. I am new to it. Here is my code
var j = 2;
var friends = [];
var distance =[];
$(document).ready(function () {
$('#button').click(function () {
if (j < 11) {
$('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
j++;
}
else {
alert("Limit reached");
}
});
$('button').click(function(){
console.log("button clicked");
var a =[];
for(i=1;i<=j;i++)
{
a[i] = $("#friend" + i).val();
}
var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
"origins=" +
a.join('|').replace(/ /g,'+') +
"&destinations=" +
a.join('|').replace(/ /g,'+') +
"&sensor=false";
jQuery.ajax(
{
type: "GET",
url: gurl,
dataType: 'jsonp'
}).done(function (response)
{
var rows = response.rows;
alert("hello there");
for (var i = 0; i < rows.length; i++)
{
for(var j=0;j<elements.length;j++)
{
distance[i][j] = rows[i].elements[j].distance;
}
}
alert(distance[1][3]);
});
});
});
Now, what it should do is Go to this link and get the data from json file and store it inside the 2 dimensional array distance[][]. Finally after storing all the data, it should display the result of "distance[1][2]" as an alert.
Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?
ps: heres the HTML file
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
</head>
<body>
<center>
<form id="locations">
Your Place:<input id="source" type="text"><br/>
<br/>
<div id="friends">
Friend1:<input id="friend1" type="text"><br/>
<br/>
</div>
<div id="button">
Add!</div>
<br/>
<br/>
<button>GO!</button>
<br/><br/>
<div id="map" style = "width: 500px; height: 500px"><br/>
</form>
</center>
</body>
</html>
Hey here is a working fiddle with your code, and some examples of ways to debug your js :
http://jsfiddle.net/QxP7p/3/
As you see you can do nice stuff like :
console.log("distance : ");
console.log(distance);
Hope it helps
They were a few mistakes as well, couldn't help fixing them
The easiest way to debug is to use firebug and console.log() variables or messages at certain points in your script, so that you can better understand what is going on at various steps of your script. You can see the output in the Console tab of firebug.
You can also add breakpoints and watches from some of the other tabs. For example in the DOM tab you can rightclick on a variable and add a watch, or from the Script tab you can click on a position in your script to set a breakpoint or watch, and it will stop the script at that point and/or show a dump of vars at that point.
i have xml file which contains lots of data. now i want to pick a price with some condition. i set a parameteres in javascript function but it is not giving desire result. i think it can be done through childnode but i didnot aware about that
XML file
<flights updated="2012-03-09T04:38:00.437" type="flights" ob_id="45792117" lastedit="2012-03-09T15:10:01" partner_id="63" activate_date="2012-02-15T00:00:00" page_id="9646" page_pk_id="12597" pos_pk_id="51565" pos="1" module_id="3" pos_name="Flights" product_type_id="4" product_type="flight" headline="Bali" destination="Bali" localised_destination="Denpasar" headline_no_html="Bali" price="199" deals_space_limited="0" deals_sold_out="0" qa_approved="1" tp_available="0" tp_weight="10" partner_eapid="0-25" partner_pid="25" publish_path="\\dubvappdaily01\daily_aus\data\psf\" partner_lang_id="3081" FrTLAs="PER" ToTLAs="DPS" FrDate="2012-04-27T00:00:00" ToDate="2012-05-04T00:00:00" Airline="QZ"/>
<flights updated="2012-03-09T04:38:00.437" type="flights" ob_id="45792117" lastedit="2012-03-09T15:10:01" partner_id="63" activate_date="2012-02-15T00:00:00" page_id="9646" page_pk_id="12597" pos_pk_id="51565" pos="1" module_id="3" pos_name="Flights" product_type_id="4" product_type="flight" headline="Bali" destination="Bali" localised_destination="Denpasar" headline_no_html="Bali" price="199" deals_space_limited="0" deals_sold_out="0" qa_approved="1" tp_available="0" tp_weight="10" partner_eapid="0-25" partner_pid="25" publish_path="\\dubvappdaily01\daily_aus\data\psf\" partner_lang_id="3081" FrTLAs="SYD" ToTLAs="DPS" FrDate="2012-04-27T00:00:00" ToDate="2012-05-04T00:00:00" Airline="QZ"/>
HTML page
<head>
<script type="text/javascript">
function myXml(origin, destination ) {
var x = xmlDoc.getElementsByTagName("flights");
for(i=0; i<x.length; i++) {
if (x[i].getAttribute('FrTLAs') == origin
&& x[i].getAttribute('destination') == destination) {
alert(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
click me
</body>
did u miss this??
xmlDoc=loadXMLDoc("flights.xml");
chk this page
http://www.w3schools.com/dom/prop_element_attributes.asp
the example2 is very clear how to use this
x=xmlDoc.getElementsByTagName("book")[0].attributes;
//here its would be getElementsByTagName("flights") in the loop
//then .attributes on it
// and then this
frtlas=x.getNamedItem("FrTLAs");
desti=x.getNamedItem("destination");
//and your code here
hope this helps