I am new for html, javascript, and katex. I wonder if you could tell me why the following simple html does not show the equation.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.16.3/dist/katex.css"
integrity="sha384-yW1frltt4cd2K6QCmOMx4M+ylOmyrGb+NDouZ1f5VL2f4NN7uBu5PQsmUSgWib1W" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.16.3/dist/katex.js"
integrity="sha384-ZfxPSr1+NHNHrv9KI48JF/1RkvdoxKWJPuYyfxE+iexlsGw8tyQR4OuNVNUuzwLN"
crossorigin="anonymous"></script>
<title>My app</title>
</head>
<body>
<span id="idequ">equation</span>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", document.getElementById("idequ"));
</script>
</body>
Related
Here is my code to the external CSS file. It was able to render my JavaScript but not my CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<link rel="stylesheet" href="../src/styles.css" type="text/css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
</html>
This is the folder
What the website looks like
Simply put
<head>
<title>React App</title>
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
OR
<head>
<title>React App</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
I want to make my project's structure better and easier to manage.
My project is only js and css now, no php.
Here is my project before:
File A
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
</head>
<body>
blah blah blah
</body>
</html>
File B
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
</head>
<body>
hello hello hello
</body>
</html>
Can I make the files like this
setting.html
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
File A and B
<html>
<head>
embed setting
</head>
<body>
blah blah
</body>
</html>
How can I do this?
Do any frameworks or library do this ?
You can do this using Js.
Like below.
<html>
<head id="includedHeader">
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedHeader").load("setting.html");
});
</script>
</head>
<body>
blah blah
</body>
</html>
You can try following way by jQuery:
<!DOCTYPE html>
<html lang="en">
<head data-include="settings.html"></head>
<body>
blah blah
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function(){
$('[data-include]').each(function(){
$(this).load($(this).attr('data-include'));
})
})
</script>
</body>
</html>
settings.html:
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
Trying to create Backbone model and got error. I have added jquery, underscore and backbone but there is still error.
var Alco = Backbone.Model.extend({
defaults: {
price: 100,
name: "Vodka",
description: "I don't know",
img: "http://xo.kz/media/images/products/2016/02/i1g1_small_13.png"
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/mainstyle.css">
<script src="js/main.js" type="text/javascript"></script>
<title> AlcoWiki </title>
</head>
<body>
<script src="js/jquery-1.12.2.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</body>
</html>
if all referenced files are there, and loading, then this should work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/mainstyle.css">
<title> AlcoWiki </title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="js/backbone.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>