I am testing API calls from HTML textbox going to JS. How can you get input HTML going to JS and insert it to the URL?
(change var city to textbox from HTML) I need to add the textbox input to the JS query API URL + textbox.textbox1 + API URL
HTML code:
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
crossorigin="anonymous"></script>
<script src = "script.js">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="weather-container">
<img class ="icon">
<p class="weather"> </p>
<p class="temp"></p>
</div>
<form action="/url" method="GET">
<p>Insert City:</p>
<input type ="text" name="city" id="citytext" placeholder="City">
<button type = "submit" id="btn1" name = "submit">Submit</button>
</form>
</body>
Here is the JS
var city = "New York"
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
console.log(data)
var icon ="https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp);
var weather = data.weather[0].main;
$('.icon').attr('src', icon);
$('.weather').append(weather);
$('.temp').append(temp);
});
You need to add click event listener on the submit button, also you need to turn its type to button to not reload the page, and then instead of use hardcoded city name, you get it from the input value.
const cityInput = document.getElementById('citytext');
const submitButton = document.getElementById('btn1');
submitButton.addEventListener('click', () => {
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + cityInput.value + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
var icon ="https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp);
var weather = data.weather[0].main;
console.log(weather)
$('.icon').attr('src', icon);
$('.weather').append(weather);
$('.temp').append(temp);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="weather-container">
<img class ="icon">
<p class="weather"> </p>
<p class="temp"></p>
</div>
<form>
<p>Insert City:</p>
<input type ="text" name="city" id="citytext" placeholder="City">
<button type = "button" id="btn1" name = "submit">Submit</button>
</form>
</body>
Related
I can't clear up my input field even tho i followed a tutorial step by step , i'm making this to do list and I want the input field to be clear anytime i submit a new to do . so what is wrong with my code ?
ps : i tried to clear the cache and nothing
let addButton=document.getElementById('addButton');
let toDoContainer = document.getElementById('ToDoContainer');
let inputField = document.getElementById('text');
//event listeners
addButton.addEventListener('click',addTodo);
//functions
function addTodo(event,title){
event.preventDefault();
//create the to do
let toDoDiv = document.createElement('div');
toDoDiv.classList.add('todo');
const newToDo =document.createElement('p');
newToDo.innerHTML=inputField.value;
newToDo.classList.add('todo-item');
toDoDiv.appendChild(newToDo);
toDoContainer.appendChild(toDoDiv);
//check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML="success";
completedButton.classList.add("complete-btn");
toDoDiv.appendChild(completedButton);
//check delete button
const trashButton = document.createElement('button');
trashButton.innerHTML="delete";
trashButton.classList.add("complete-btn");
toDoDiv.appendChild(trashButton);
//append todo
toDoContainer.appendChild(tododiv);
inputField.value= "";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>to do list </title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<header>
<h1>This is your to do list </h1>
<div class="input">
<input type="text" placeholder="what to do ...?" id="text">
<input type="button" value="add" id="addButton">
</div>
</header>
<div id="ToDoContainer">
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
here is a screenshot
sonEtLumiere is right, you have a typo. It should be:
toDoContainer.appendChild(toDoDiv);
Your variable is called toDoDiv, you have an error in this line (penultimate line):
toDoContainer.appendChild(tododiv);
This will work:
toDoContainer.appendChild(toDoDiv);
could someone please explain how i get user input from a form to use in JS? ive tried numerous things and the alert just keeps saying {object undefined}? It must be something simple but i cant seem to find the answer anywhere!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "style.css" rel ="stylesheet" type = "text/css">
<script src="script.js" type ="text/javascript" defer ></script>
<title>Tip Calculator</title>
</head>
<body class = "body">
<div class = "form-container">
<h1 class = "heading">Tip Calculator</h1>
<form class = "form" method="GET" action="">
<label for = "bill-amount">How much is the Bill?</label><br>
<input type = "number" placeholder="£0.00" name = "bill-amount" id="bill-amount" data-bill><br>
<label for = "service">How was the Service?</label><br>
<select name = "serivce" id = "service">
<option value = "poor">Poor - 5%</option>
<option value = "good">Good - 10%</option>
<option value = "excellent">Excellent - 20%</option><br>
</select><br>
<label for = "people" name = "people">How many People are spliting the Tip?</label><br>
<input type = "number" name = "people" id = "people"><br>
<input type = "submit" name = "submit" class = "submit" id = "submit">
</form>
<div class = "output">
<p> Tip amount: <span class = "bill-amount">£0</span></p>
<p> Tip amount: <span class = "tip-amount">£0</span></p>
<p> Tip Per Person: <span class = "tip-person-amount">£0</span></p>
</div>
</div>
</body>
</html>
JS
const bill = document.getElementById('bill-amount')
const submit = document.getElementById('submit')
submit.addEventListener('click', function() {
alert(bill)
})
You can access the value of the field by using .value as shown in the code below. The example below pulls the value from the specified selector bill-amount field after the forms is submitted which is presumably after its received input. As a side note, since you're likely going to be doing calculations with this number, remember you have to parse that string into a float. You can do that with .parseFloat.
const submit = document.getElementById('submit');
const bill = document.getElementById('bill-amount');
submit.addEventListener('click', function() {
alert(bill.value) //returns a string to parse use .parseFloat
})
I think you should put the id bill-amount to the input element not the label.
and then use something like:
bill = document.querySelector("#bill-amount").innerText;
this way the value that the user input will be stored in bill
The issue is that bill in your example is a reference to the HTML element with the id bill-amount. It's not a value by itself. To extract the value from the HTML element, you can do the following: bill.value. I have created a working snippet below based upon your sample code.
const bill = document.getElementById('bill-amount')
const submit = document.getElementById('submit')
submit.addEventListener('click', function() {
alert(bill.value)
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "style.css" rel ="stylesheet" type = "text/css">
<script src="script.js" type ="text/javascript" defer ></script>
<title>Tip Calculator</title>
</head>
<body class = "body">
<div class = "form-container">
<h1 class = "heading">Tip Calculator</h1>
<form class = "form" method="GET" action="">
<label for = "bill-amount">How much is the Bill?</label><br>
<input type = "number" placeholder="£0.00" name = "bill-amount" id="bill-amount" data-bill><br>
<label for = "service">How was the Service?</label><br>
<select name = "serivce" id = "service">
<option value = "poor">Poor - 5%</option>
<option value = "good">Good - 10%</option>
<option value = "excellent">Excellent - 20%</option><br>
</select><br>
<label for = "people" name = "people">How many People are spliting the Tip?</label><br>
<input type = "number" name = "people" id = "people"><br>
<input type = "submit" name = "submit" class = "submit" id = "submit">
</form>
<div class = "output">
<p> Tip amount: <span class = "bill-amount">£0</span></p>
<p> Tip amount: <span class = "tip-amount">£0</span></p>
<p> Tip Per Person: <span class = "tip-person-amount">£0</span></p>
</div>
</div>
</body>
</html>
const bill = document.getElementById('bill-amount')
const submit = document.getElementById('submit')
const form = document.forms[0] // documentGetById, by className or querySelector
form.addEventListener("submit", e => {
e.preventDefault()
const form = e.target;
console.log(form.elements)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "style.css" rel ="stylesheet" type = "text/css">
<script src="script.js" type ="text/javascript" defer ></script>
<title>Tip Calculator</title>
</head>
<body class = "body">
<div class = "form-container">
<h1 class = "heading">Tip Calculator</h1>
<form class = "form" method="GET" action="">
<label for = "bill-amount">How much is the Bill?</label><br>
<input type = "number" placeholder="£0.00" name = "bill-amount" id="bill-amount" data-bill><br>
<label for = "service">How was the Service?</label><br>
<select name = "serivce" id = "service">
<option value = "poor">Poor - 5%</option>
<option value = "good">Good - 10%</option>
<option value = "excellent">Excellent - 20%</option><br>
</select><br>
<label for = "people" name = "people">How many People are spliting the Tip?</label><br>
<input type = "number" name = "people" id = "people"><br>
<input type = "submit" name = "submit" class = "submit" id = "submit">
</form>
<div class = "output">
<p> Tip amount: <span class = "bill-amount">£0</span></p>
<p> Tip amount: <span class = "tip-amount">£0</span></p>
<p> Tip Per Person: <span class = "tip-person-amount">£0</span></p>
</div>
</div>
</body>
</html>
The variable status is set to "uncheck" and needs to be updated to "done" using the change() function.
Ultimately what needs to happen When button with id randomIdTwo is pressed, The completeTodo() function is called which causes the list item to be removed from its current div "list", appended to the div "complete-list", and the change() function updates the value of the "status" variable from "uncheck" to "done".
Everything works except the change() function.
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change() {
status = "done";
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Changing the status variable doesn't change the class of the element. You need to update the button's classList
document.getElementById('button').addEventListener('click', function addTodo() {
var value = document.getElementById('input').value;
var status = "uncheck";
var randomId = Math.random();
var randomIdTwo = Math.random();
function change(button) {
button.classList.add("done");
button.classList.remove("uncheck");
};
const item = `<li>
<div class="item">
<div class="complete">
<button id="` + randomIdTwo + `" class="${status}"></button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId + `" class="todo"></button>
</div>
</div>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
document.getElementById(randomId).addEventListener('click', function removeTodo() {
var item = this.closest('li');
item.remove();
});
document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
var item = this.closest('li');
item.remove();
document.getElementById("completelist").appendChild(item);
change(this);
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<div id="datetime"></div>
<div id="ampm"></div>
<input type="text" id="input" placeholder="Add an item" />
<button id="button" type="button"><img src="./img/additem4.png"></button>
</header>
<div id="list">
</div>
<div id="divline"></div>
<div id="completelist">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
You're using string interpolation to set the class initially, but string interpolation does not create a data-binding between the resultant element and the variable. So change() is being called, and status is being updated, but the value of the element you created via a string isn't seeing that change, so it's not being updated.
You would need to access the element in the DOM and change it's classList manually.
I am using a $.getJSON method to retrieve weather data from open weather. When i use an explicit URL string for the document ready function, I am able to retrieve the values from the response JSON and write them to the page.
This works fine.
I am attempting to create a basic user input to query the data by zip code. I've created a nested function with the API URL as a concatenated string. I am unable to determine why the code in the nested function submitZip is not writing the response to the page in the same way that the document ready function did.
I have tried debugging and it appears that the string is concatenating correctly and making the API call successfully, but for some reason I am unable retrieve data from the response. Any ideas on I may have incorrect here?
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip() {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
Your page gets reloaded as soon as you press the submit button.
Change the type of the button to button or
prevent the default behaviour using event.prevenDefault()
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
e.preventDefault();
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
Two issues:
The form is submitted (and reloads) when you click the button. Avoid this by calling e.preventDefault() on the event object.
You have a spelling mistake in weather.innertText. Remove the extra t in the middle
Working code:
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innerText = data.main.temp;
});
e.preventDefault();
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
I want to pull from the form the city name. and place it in the var at top where it say dallas so that when some one enters the city name it will auto update the var with right city name. I apologize for the early long winded remark. Stack overflow wanted more.
Turn HTML Form Input into JavaScript Variable
and
Obtain form input fields using jQuery?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"></style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// $("#submit").click(function(){
// alert("The paragraph was clicked.");
// }); // Submit button click
var city = "dallas" <==== code to pull from form
console.log(city);
$.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da" //api call with imperial units
,function(data){
console.log(data);
$("#weather").append(data.name); // City name
$("#temp").append(data.main.temp) //temp pull
});
});
</script>
</head>
<body>
<div id='wrapper'>
<div id = "formdiv">
<form id= "forminfo">
<input type="text" name="city" value="cityname" > <---this
<input id = "submit" type="submit" ></input>
</form>
</div>
<div id = 'weather'> </div>
<div id='temp'> <p></p> </div>
</body>
</html>
If you're talking about grabbing the value of this field form:
<input type="text" name="city" value="cityname" >
You can do it this way:
var city = $("input[name='city']").val();
Here's an example of the whole implementation:
$(document).ready(function() {
$("#forminfo").on("submit", function(e) {
e.preventDefault();
var city = $("input[name='city']").val();
console.log(city);
$.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da" //api call with imperial units
,function(data){
console.log(data);
$("#weather").append(data.name); // City name
$("#temp").append(data.main.temp) //temp pull
});
});
});
var city = "";
$("input[name='city']").blur( function() {
city = $("input[name='city']").val();
} )