I am new to coding so sorry if there is a blatant mistake I am missing. I made sure both files are in the same folder. I linked the js file to the HTML file using the correct path. I made sure my browser has JS enabled for websites. The code works in fiddle but does not work locally.
Java script
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<html>
<body>
<script type="text/javascript" src="app.js" charset="utf-8"></script>
<select id="brands">
<option value="trane">trane</option>
<option value="brand2">brand2</option>
<option value="brand3">brand3</option>
</select>
<input id="txtField" type="text" name="b">
<button onClick="check();">submit</button>
<div id="result"></div>
</body>
</html>
HTML
var brands = {
"trane": tonnageTrane,
"brand2": {},
"brand3": {}
}
var tonnageTrane = {
"18": 1,
"24": 2,
"30": 2.5,
"36": 3,
"42": 3.5,
"48": 4
}
function check() {
var select = document.getElementById('brands');
var value = select.options[select.selectedIndex].value;
var inp = document.getElementById('txtField').value;
document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
}
edit: added the text version of code
You should write your code as below when posting a question or answer.
Your code repeats its HTML tag twice, your script tag should be in the head, and tonnage should be above brands since tonnage is used in it - regardless though your code should work. Your issue is most likely that your JavaScript file is not in the same folder as your HTML file. You can also use the HTML I made from yours below just in case there is a syntax issue I did not see; I tested the code and it works fine. When debugging your JavaScript code, you should use the console of the web browser; it will show you the errors.
JS:
var tonnageTrane = {
"18": 1,
"24": 2,
"30": 2.5,
"36": 3,
"42": 3.5,
"48": 4
}
var brands = {
"trane": tonnageTrane,
"brand2": "brand2test",
"brand3": "brand3test"
}
function check(){
var select = document.getElementById('brands');
var value = select.options[select.selectedIndex].value;
var inp = document.getElementById('txtField').value;
document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<select id="brands">
<option value="trane">trane</option>
<option value="brand2">brand2</option>
<option value="brand3">brand3</option>
</select>
<input id="txtField" type="text" name="b">
<button onClick="check();">submit</button>
<div id="result"></div>
</body>
</html>
You have a few problems. First you have two opening <HTML> tags. Next, you are missing a <head> tag.
As for your script, you either need to link to the JS file LAST inside of the body tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
Your HTML Here
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</body>
</html>
Or within the head tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</head>
<body>
Your HTML Here
</body>
</html>
Related
I am trying to make a simple latin dictionary. I am new to JavaScript so I am trying to test the input tag with the alert function. In the console, I am receiving the error message after I click the "translate" button. Error: "translate is not a function (in 'translate()', 'translate' is true)".
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
JavaScript:
function translate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
Thank you in advance :)
To solve it, choose another function name, such as myTranslate().
Why you can't use translate()? Because there's already a built-in translate in HTML. See here.
Note: You can choose whatever you want.
JS Code:
function myTranslate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
HTML:
<button onclick="myTranslate()" id="btn-translate-latin-english">Translate</button>
Let me know if it works.
I think this error is being called because you are using the script tag after the button tag. I think moving the script into the head of the html will solve the issue
You seem to use the function's name translate which is a reserved word in JavaScript.
translate is a global attribute to make elements translatable or movable.
You must rename the function to fix this error. I used Translate():
function Translate() {
var latinWord = document.getElementById("latin-word").value;
alert("Word that was entered: " + latinWord);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="Translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
So I want to connect to this API:
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
from here: https://www.myshiptracking.com/more/embed-our-map
I want to make an HTML page where I can input a mmsi (a variable in the code) and display it on the map.
This is what I've got so far:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ship tracker</title>
</head>
<body>
<input type="text" placeholder="mmsi" id="input">
<input type="button" onclick="submit()" value="ubmit">
<script src="app.js"></script>
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
</body>
</html>
and for JAVASCRIPT
var mst_width="75%";
var mst_height="350px";
var mst_border="0";
var mst_map_style="simple";
function submit() {
var mst_mmsi = document.getElementById("input").submit;
}
var mst_show_track="";
var mst_show_info="";
var mst_fleet="";
var mst_lat="";
var mst_lng="";
var mst_zoom="";
var mst_show_names="0";
var mst_scroll_wheel="true";
var mst_show_menu="true";
When I submit an input, I get no output from the map... do I have to refresh the map or something?
Here is the code for the HTML:
<script>var mst_width="100%";var mst_height="350px";var mst_border="0";var mst_map_style="simple";var
mst_mmsi="";var mst_show_track="false";var mst_show_info="true";var mst_fleet="";var mst_lat="";var
mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var
mst_show_menu="true";</script>
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
I grabbed all of that code from the same website: https://www.myshiptracking.com/more/embed-our-map
Click on the link and then click on "get code" to get the exact same code.
Thanks :)
I hope I explained my problem well enough...
I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );