I cannot get CallBack / Javascript Api - javascript

Currently I am working on Translate App ( Via Yandex Api );
I have one problem that I could not understand...
If Someone would help me with it;
I'd be very happy.
So Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translator App</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<section class="main">
<div class="header">
<h1>Welcome to Translator</h1>
<h2>Translate in English,Spanish,German,Turkish</h2>
<div class="language">
<div class="languageto">
<select class="firstlanguages" name="languages" id="langs">
<option value="en">English</option>
<option value="tr">Turkish</option>
<option value="de">German</option>
<option value="sp">Spanish</option>
</select>
</div>
<div class="tolanguage">
<select id="tolanguage" name="tolanguage">
<option value="toeng">Turkish</option>
<option value="totr">English</option>
<option value="tode">German</option>
<option value="tosp">Spanish</option>
</select>
</div>
</div>
<form id="translate-form">
<div class="translate">
<textarea class="firstmsj" name="word" placeholder="Maximum 500 Character" id="word" value="Nasılsın"></textarea>
<textarea class="secondmsj" name="message" disabled placeholder="Your Translate"></textarea>
</div>
<input class="translatebtn" type="submit" value="Translate">
</form>
</div>
</section>
<script src="js/translate.js"></script>
<script src="js/app.js"></script>
</body>
</html>
And I have 2 Different JS files ;
First is App.js
eventListeners();
function eventListeners(){
let form = document.getElementById("translate-form");
form.addEventListener("submit", translateWord);
document.querySelector('.firstlanguages').onchange = function(){
//Arayüz işlemleri
}
}
let word = document.getElementById("word").value;
let lang = document.getElementById("langs").value;
const translate = new Translate(word,lang);
function translateWord(e){
translate.translateWord();
e.preventDefault();
}
Second javascript file is Translate.js
function Translate(word,language){
this.apikey = "trnsl.1.1.20200430T094119Z.fcb3cffaccaa7301.9f383b774f2aaea42d9be57e8799a3310f7074c1";
this.word = word;
this.language = language;
// XHR Object
this.xhr = new XMLHttpRequest();
}
Translate.prototype.translateWord = function(){
// Ajax Works
const endpoint = `https://translate.yandex.net/api/v1.5/tr.json/translate?key=${this.apikey}&text=${this.word}&lang=${this.language}`;
this.xhr.open("GET",endpoint);
this.xhr.onload = () =>{
if(this.xhr.status === 200){
console.log(this.xhr.responseText);
}else{
console.log("Hata");
}
}
this.xhr.send();
};
The mistake is , whenever I submit it;
The error message is ;
translate.js:28 GET https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20200430T094119Z.fcb3cffaccaa7301.9f383b774f2aaea42d9be57e8799a3310f7074c1&text=&lang=en 400 (Bad Request)
and when we see the link we cannot see ${this.word} is placed in my URL.
When I check the code after submit, also xhr.send() has been red...
this.xhr.send();
Except that everything works perfectly so far.
What could be the issue?
Thank you for your help!

You are getting an empty this.word because you are instantiating the Translate object out of the event handler:
const translate = new Translate(word,lang);
Initially, the input is empty, hence the blank space in this.word.
Solution: move the variables and instantiate inside the translateWord handler, so that they get updated on each search.
function translateWord(e){
let word = document.getElementById("word").value;
let lang = document.getElementById("langs").value;
const translate = new Translate(word,lang);
translate.translateWord();
e.preventDefault();
}
You will see, now it responds with 200 and the corresponding JSON data.

Related

JQuery append HTML using class tags onclick

Im sorry if this is a bit of a novice quest. I've only recently started learning. I'm trying to use jQuery to append a series of input text boxes onto my website but nothing I've tried has worked so far.
HTML doc
<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>
<titleTest Web App</title>
<h1>Test Number 1</h1>
</head>
<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
<option value="Pipe_crack">Pipe Crack</option>
</select>
<br>
<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
<option value="N/S">Nature Strip</option>
<option value="Road">Road</option>
<option value="n/s_rd">Nature Strip & Road</option>
</select>
<form>
<label for="meters">Number of Meters:</label>
<input type="number" id="ren_meter" name="ren_meter">
</form>
</div>
<button id="save_meth" onclick="appendmethd()">Add Methodology</button>
<div class="meth_append">
</div>
</div>
</html>
Javascript doc:
function meth_hide_show() {
var x = document.getElementById("methodology");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function appendmethd() {
var meth=document.getElementById("methodology")
$("meth_append").append(meth)
}
Try this
function meth_hide_show() {
//retrieve the jquery object
var x = $("#methodology");
if (x.is(':visible')) {
//if its visible, hide it
x.hide();
} else {
//else show it
x.show();
}
}
function appendmethd() {
var meth=$("#methodology");
$(".meth_append").append(meth);
}

Reference error document is not defined in javascript

I am using bracket editor when I save the bill.js editor show some
error at every document the desired output is not coming.
HTML code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>split Bill</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="splitbill.css">
</head>
<body>
<div id="container">
<h1>Bill calculator</h1>
<div id="calculator">
<form>
<label>
How Much your Bill ? <br>
Rupees <input type="text" id="billAmount">
</label>
<label>
How was your Service sir?<br>
<select id="serviceFeedback">
<option disabled selected value="0">
--Choose an option--
</option>
<option value="0.4">
40% -Very Good
</option>
<option value="0.3">
30% - Good
</option>
<option value="0.2">
20% - it was Ok
</option>
<option value="0.1">
10% - Bad
</option>
<option value="0.05">
5% - poor
</option>
</select>
</label>
<label>
How many people sharing the bill?<br>
<input type="text" id="totalpeople">
people
</label>
<button type="button" id="calculate">calculate!</button>
</form>
</div>
<div id="totalTip">
<sup>Rupees</sup><span id="tip">0.00 </span>
<small id="each">each</small>
</div>
</div>
<script type="text/javascript" src="bill.js"></script>
</body>
</html>
javascript is here I didn't get desired output at every document function there is error sign please tell me what I do I am using bracket editor.
why I got this I am using
at the end of HTML code
//create function
function calculateTip() {
var billAmount = document.getElementById("billAmount").value;
var serviceFeedback = document.getElementById("serviceFeedback").value;
var numpeople =document.getElementById("totalpeople").value;
//validation
if (billAmount =="" ||serviceFeedback == 0) {
window.alert("please enter some value Boss!");
return;
}
//if input is empty
if (numpeople =="" ||numpeople <= 1) {
numpeople =1;
document.getElementById("each").style.display ="none";
} else {
document.getElementById("each").style.display ="block";
}
var total = (billAmount * serviceFeedback) / numpeople;
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
//display the tip
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
// hide tip amount
document.getElementById("totalTip").style.display ="none";
document.getElementById("each").style.display ="none";
//clicking the button calls our custom function
document.getElementById("calculate").onclick=function()
{
calculateTip();
}
In the function "calculateTip" I found the line:
if (billAmount =="" || ServiceFeedback == 0) {
Here ServiceFeedback starts with a capital letter instead of a lower case letter.
The selected option of a select-Field you get like that:
let selectElement = document.getElementById("serviceFeedback");
let serviceFeedback = selectElement.option[selectElement.selectedIndex].value;
In the html file I found an other problem:
<input type="text" id="totalpeople ">
There is a blank at the end of the id! Better would be:
<input type="text" id="totalpeople">
In the javascript file there is an other blank:
document.getElementById("each").style.display = " none";
Better would be:
document.getElementById("each").style.display = "none";
I hope that helps.
To ReferenceError: document is not defined I found that:
ReferenceError: document is not defined (in plain JavaScript)
=> My questions are:
What does bill.js contain?
Where is calculateTip() called?
I mean: Is anywhere a call like that document.getElementsBy... before the document is created?

How to set value on input field from other page using onclick through javascript

I need to pass value from page1.html to page2.html. However, nothing happens as open the page2.html as fill out the input field.
How should I do to fix it?
Page1.html
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
document.getElementById('prod0').value = p1name;
document.getElementById('prod1').value = p2name;
}
}
</script>
</body>
Page2.html
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body></html>
You can use JS localstorage to achieve your requirements.
Here is one case that can solve your problem.
Page 1:
<body>
<div class="pname" data-id="barcode-number" onclick="goforward(this);">Prod</div>
<script type="text/javascript">
function goforward(d) {
var r = d.getAttribute("data-id");
var detailsWindow = window.open('page2.html');
detailsWindow.onload = function{
let val1 = document.getElementById('prod0').value = p1name;
localStorage.setItem('prod0', 'val1');
let val2 = document.getElementById('prod1').value = p2name;
localStorage.setItem('prod1', 'val2');
}
}
</script>
</body>
Page 2:
<!DOCTYPE html>
<html><head><title></title></head>
<body>
<div class="md_product">
<input id="prod0" value="Product One">
<input id="prod1" value="Product Two">
</div>
</body>
<script type="text/javascript">
var prod0 = localStorage.getItem("prod0");
var prod1 = localStorage.getItem("prod1");
document.getElementById('prod0').value=prod0;
document.getElementById('prod1').value=prod1;
</script>
</html>
you have to pass perameters in render url like /page2?param1=textbox1value,param2=textbox2value

Why are the dynamic options appearing so small?

I have a drop-down menu that I am dynamically adding options to (based on an AJAX call) on an onfocus event. For some reason, the first time I click on the box, the options appear condensed into a tiny box, but the second time it works just fine. Does anyone know what might be causing this phenomenon? (Note: Because it involves AJAX, I can't insert a fiddle that could simulate the error, but I will post the code itself)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Remove Class | IMS</title>
<link rel="stylesheet" type="text/css" href="../css/form.css"/>
</head>
<body>
<form>
<label for="class">Class:</label>
<select name="class" onfocus="loadClasses(this)" id="drop" required>
<option>Sample Value</option>
</select>
<hr/>
<button type="button" onclick="sendData()">Remove Class</button>
</form>
</body>
</html>
JS Code:
function genDrop(e, json) {
e.innerHTML = "";
var data = eval("({data: " + json + "})");
data = data.data;
for (var i = 0; i < data.length; i++) {
var option = data[i];
var o = document.createElement("option");
o.value = option.id;
o.innerHTML = option.name;
o.setAttribute("descript", option.descript);
o.style.width = "500px !important"
o.style.maxWidth = "200%";
e.appendChild(o);
}
}
function loadClasses(e) {
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if (http.readyState === 4 && http.status === 200) {
genDrop(e, http.responseText);
}
}
http.open("GET", "getclasses.php", true);
http.send();
}
Use onload instead of onfocus
<select name="class" onload="loadClasses(this)" id="drop" required>
<option>Sample Value</option>
</select>

$_POST Not Showing Current Option

My code is meant to take input text and generate an output for it using PHP via AJAX. While $_POST["inputText"] is set $_POST["style"] isn't set. How can I modify my code to set $_POST["style"] to the current option (a, b or c)?
functions01.php is any generic PHP file that takes $_POST["inputText"] and $_POST["style"] echos out an appropriate output.
foo1.php
<!DOCTYPE html>
<html>
<body>
<!-- Input -->
<div class="form">
<form onsubmit="makeRequest(); return false">
<input type="text" id="inputText" name="inputText">
<select name="style">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<input type="submit">
</form>
</div>
<br>
<!-- Output -->
<div class="txtBox">
<textarea id="txtBox">
</textarea>
</div>
<!-- AJAX to create output using function01.php file-->
<script>
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
document.getElementById("txtBox").innerHTML = httpRequest.responseText;
};
httpRequest.open("POST", "functions01.php", true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send("inputText=" + document.getElementById("inputText").value);
}
//function
</script>
</body>
</html>
HTML
<select name="style" id="ddlStyle">
JS
var inputVal = document.getElementById("inputText").value;
var e = document.getElementById("ddlStyle");
var styleVal = e.options[e.selectedIndex].value;
...
httpRequest.send("inputText=" + inputVal + "&style=" + styleVal );

Categories