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>
Related
I have a folder with two files each, once the HTML file, and once the JS file to make everything clearer. My problem now is that I try to access an ID within the HTML file with the getElementById but this doesn't seem to work.
var score = 0;
score = score + 1;
document.getElementById("score").outerHTML = score;
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</body>
</html>
I am trying to call the ID "score" in the HTML file to make sure that when I start the HTML file locally the number changes from 0 to 1.
Click on the number in the HTML file, which will change the value. You cannot change the value without a trigger in the HTML. Something needs to be clicked or changed for the value to appear.
Edit: And don't grab the outerHTML of the element. You are erasing the whole score span and replacing it with the count. Use textContent instead.
let elem = document.querySelector("#score");
elem.addEventListener("click", (e) => {
elem.textContent = Number(elem.textContent) + 1;
})
#score {
cursor: pointer;
}
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript" defer></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</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'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I'm trying to make the picture on the index.html page change when you push the button. Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="lolcatButton">Show me the LOLCat!</button>
<br><br>
<img id="lolcatImage" src=https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat5.jpg>
<script src="script.js"></script>
</body>
And here's my js:
var lolcatButton = document.getElementById(“lolcatButton”);
var lolcatImage = document.getElementById(“lolcatImage”);
var image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat4.jpg";
var showMeTheLolcat = function(){
lolcatImage.src = image;
};
lolcatButton.addEventListener(“click”, showMeTheLolcat);
I'm getting an error on line 1 of the js "uncaught syntaxerror: invalid or unexpected token."
Does anyone have any ideas? Thank you very much!
var lolcatButton = document.getElementById("lolcatButton");
Change the ” to ". And the other lines.
You can reorganize your code like this:
<button id="lolcatButton" onclick="showMeTheLolcat()">Show me the LOLCat!</button>
<br><br>
<img id="lolcatImage" src=https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat5.jpg>
<script>
function showMeTheLolcat() {
var image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat4.jpg";
lolcatImage.src = image;
}
</script>
Try it on jsfiddle here.
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.