can i ask a question. I try to make a reading GPS ( the Latitude and Longitude ), i follow this link https://www.itilog.com/ but it just using innerHTMl or sthing. the idea is how to sending data ( the Latitude and Longitude ) into the input tag so that i can have the data the user who enter these data. Here are the code i follow W3school:
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks" onclick="getlocation()">
Click Me
</button>
<input type="text" id="demo1" onkeyup="showLoc()"></input>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerInput =
"Latitude: " +
pos.coords.latitude +
"<br>Longitude: " +
pos.coords.longitude;
}
</script>
</body>
</html>
I have the code in html and css:
#NOTE: U need to using responsive to see the code files
this is html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="generateqr.css">
</head>
<body>
<div class="container">
<h3>Course's name</h3>
<div class="body">
<div class="small_container">
<button>Generate QR</button>
</div>
<div class="small_container">
<button>Your Files</button>
</div>
<div class="info">
<div class="title1">
<p>Longitude:</p>
<input placeholder="type here...">
</div>
<div class="title2">
<p>Latitude:</p>
<input placeholder="type here...">
</div>
</div>
<div class="location">
<a id="check" href="https://www.itilog.com/">check here if you don't know your location</a>
</div>
</div>
</div>
<div class="footer">
Back
</div>
</body>
</html>
and CSS file:
* {
background-color: #7879f1;
position: relative;
}
h3 {
text-align: center;
}
.body{
width: 110%;
height: 500px;
margin-left: -10px;
background-color: white;
position: absolute;
}
.small_container{
background-color: white;
margin-left: 10%;
margin-top: 20%;
display: inline-block;
}
.footer{
margin-top: 515px;
background-color: white;
width: 110%;
margin-left: -10px;
margin-bottom: -20px;
padding-bottom: 20px;
}
button{
height: 50px;
width: 100px;
margin-left: 20px;
}
a{
background-color: white;
margin-left: 50px;
padding-bottom: 20px;
}
.info{
width: 100%;
height: 20%;
margin-left: 10%;
background-color: white;
margin-top: 10%;
}
.input{
background-color: white;
}
input {
background-color: white;
}
p {
background-color: white;
display: inline-block;
padding-left: 10%;
}
.location {
margin-top: 20%;
background-color: white;
}
.title1{
background-color: white;
}
.title2{
background-color: white;
}
i hope that we can send the data to the input ( i already have 2 input tag for the Latitude and Longitude )
You can change inputs like that :
var input = document.getElementById("input");
input.value = 'value';
For your context i made a jsfidle for you understand how to do it :
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>
<button id="_button">
Click Me
</button>
<input type="text" id="latitudeInput" value=""></input>
<input type="text" id="longitudeInput" value=""></input>
<script>
var button = document.getElementById('_button');
var latitudeInput = document.getElementById("latitudeInput");
var longitudeInput = document.getElementById("longitudeInput");
button.addEventListener('click', function(){
getlocation();
});
function getlocation() {
// Callbacks
const successCallback = (position) => {
// Set inputs values
latitudeInput.value = position.coords.latitude;
longitudeInput.value = position.coords.longitude;
};
// Manage error messages
const errorCallback = (error) => {
alert(error.code+' : '+error.message);
};
// Call
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}
</script>
</body>
</html>
jsfiddle.net/EdvaldoFilho/ermup5a9/4/
Hope it helps you !
Related
I am trying to make a to-do list by myself and it's going pretty well, but I can't remove the correct div. It always removes the first one in the pile. I am not creating new divs, I am basically cloning a template that I've made and setting the display as none.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma() {
let father = document.getElementById('container')
let son = document.getElementById('tarefa')
let apaga = father.removeChild(son)
}
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: aqua;
}
header {
text-align: center;
background-color: rgb(255, 208, 0);
}
#container {
display: flex;
background-color: beige;
margin-top: 15px;
margin-left: 15%;
margin-right: 15%;
height: 90vh;
align-items: stretch;
padding-top: 8px;
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
}
.tarefa {
padding: 5px;
background-color: brown;
margin-left: 8px;
margin-right: 8px;
display: flex;
}
.texto {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
::placeholder {
color: white;
opacity: 1;
}
.remove {
float: right;
height: 40px;
width: 40px;
color: #333;
cursor: pointer;
}
#botao {
position: fixed;
background-color: brown;
height: 80px;
width: 80px;
border-radius: 50%;
bottom: .8%;
left: 1.5%;
text-align: center;
color: white;
font-weight: 900;
font-size: 4.5rem;
}
#TarefaEscondida {
padding: 5px;
background-color: brown;
/* margin-top: 8px; */
margin-left: 8px;
margin-right: 8px;
display: none;
}
#TextoEscondido {
border: none;
margin-left: 8px;
background-color: brown;
color: white;
width: 90%;
padding: 8px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My To Do list</title>
</head>
<body>
<header id="header">
<h1>My To do list</h1>
</header>
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma()">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
<script src="main.js"></script>
</body>
</html>
You don't need to bother with element IDs. DOM navigation will allow you to find the parent of the clicked element, and remove it:
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
(Notice how I've changed the onclick so it passes this element)
And then your remove function can simply locate the parent of the clicked element and remove it.
function suma(element) {
element.parentNode.remove();
}
Also, please note: In your function that adds a new element, you should be aware of duplicating element IDs. That will create invalid HTML because IDs must be unique.
Here is a Fiddle example.
let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())
function addTarefa() {
let divtarefa = document.getElementById('TarefaEscondida')
clone = divtarefa.cloneNode(true)
clone.id = 'tarefa'
clone.class = "tarefa"
container.appendChild(clone)
clone.setAttribute('display', 'flex')
clone.setAttribute('class', 'tarefa')
clone.setAttribute('id', 'tarefa')
}
function suma(element) {
element.parentNode.remove();
}
<main id="container">
<div id="TarefaEscondida">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
</div>
<div id='tarefa' class="tarefa">
<input type="button" value="Feito" class="remove" onclick="suma(this)">
<input type="text" placeholder="Escreva aqui..." class="texto">
</div>
</main>
<div id="botao" onclick="addTarefa()">
<P>+ </P>
</div>
In .addEventListener you put function but don't call it.
d.addEventListener('click',addTarefa)
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to go back to when I learned javascript to make a game of pong. I am trying to get the "left" value to see how far the playArea is from the left to set the position of the ball in the middle.
The script is located at the bottom of the body tag.
Where I am trying to call the resetGame function just to test to see if I can change the balls position to be in the center of the play area. I am trying to log the value of the playArea's left value and it is returning it as if it is nothing. (See below)
It should say "Value of playArea's left: 150px" or maybe just the 150 but it is just empty
The live server is just so i can run it on my browser. Any help would be great as to why this is not returning anything. Thanks!
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
return document.getElementById(id).style[property];
}
#playArea{
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body{
background-color: black;
}
#ball{
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
#start{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 500px;
}
#reset{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 700px;
}
.insidebuttons{
font-size: 20px;
padding: 13px;
text-align: center;
font-family: sans-serif;
}
.insidebuttons:hover{
cursor: pointer;
}
.paddle{
width: 30px;
height: 100px;
position: fixed;
background-color: white;
top: 33%
}
#paddleLeft{
left: 170px;
}
#paddleRight{
left: 1105px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
You cannot get the value directly from the style of the element. For values coming from external css stylesheets, you need to use getComputedStyle() function to get the actual value coming from the stylesheet. The returned value of getStyle() will be in px value.
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
//return document.getElementById(id).style[property];
let el = document.getElementById(id);
return getComputedStyle(el).getPropertyValue(property); // getComputedStyle will get the actual value from the stylesheet
}
#playArea {
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body {
background-color: black;
}
#ball {
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
The animations work perfectly on shapes. But audio files dont play. What might be the reason?
I added all the html, css, and javascript files for you to see.
It still doesnt let me post it, so i am extending the question. I hope someone can solve this issue. Thank you in advance. I'd be so happy for your help
var buttonColours = ["red","blue","green","yellow"];
var gamePattern = [];
function nextSequence() {
var randomNumber = Math.floor(Math.random()*4); // 0-3
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
//1. Use jQuery to select the button with the same id as the randomChosenColour
$("#"+randomChosenColour).fadeIn().fadeOut().fadeIn();
var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
audio.play();
}
nextSequence();
body {
text-align: center;
background-color: #011F3F;
}
#level-title {
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.container {
display: block;
width: 50%;
margin: auto;
}
.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="game.js"></script>
</body>
</html>
I want to take the value on an input field and display what the user has entered using JQuery on clicking a submit button. The problem is that when I click the button the console.log is blank without the user text and this is driving me crazy because I can't figure out why, here is my html:
const userLocation = $('#location').val();
$('#submit').on('click', getInfo);
function getInfo() {
console.log(userLocation)
}
#content {
width: 400px;
}
#request {
text-align: center;
}
.bl {
width: 300px;
}
#current {
text-align: center;
font-size: 2em;
}
#upcoming {
text-align: center;
}
.condition {
text-align: left;
display: inline-block;
}
.symbol {
font-size: 4em;
display: inline-block;
}
.forecast-data {
display: block;
}
.upcoming {
display: inline-block;
margin: 1.5em;
}
.label {
margin-top: 1em;
font-size: 1.5em;
background-color: aquamarine;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecatser</title>
</head>
<body>
<div id="content">
<div id="request">
<input id="location" class='bl' type="text">
<input id="submit" class="bl" type="button" value="Get Weather">
</div>
<div id="forecast" style="display:none">
<div id="current">
<div class="label">Current conditions</div>
</div>
<div id="upcoming">
<div class="label">Three-day forecast</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./weather.js"></script>
</body>
</html>
Why does the console print blank lines with no value, what am I doing wrong?
You're reading only the initial value of the input, not after it has been clicked. You should read the value inside of your callback, to get it's value at the time of clicking:
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
Here is working sample with small change of your code
$('#submit').on('click', function(){
getInfo();
});
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecatser</title>
<style>
#content { width: 400px; }
#request { text-align: center; }
.bl { width: 300px; }
#current { text-align: center; font-size: 2em; }
#upcoming { text-align: center; }
.condition { text-align: left; display: inline-block; }
.symbol { font-size: 4em; display: inline-block; }
.forecast-data { display: block; }
.upcoming { display: inline-block; margin: 1.5em; }
.label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; }
</style>
</head>
<body>
<div id="content">
<div id="request">
<input id="location" class='bl' type="text">
<input id="submit" class="bl" type="button" value="Get Weather">
</div>
<div id="forecast" style="display:none">
<div id="current">
<div class="label">Current conditions</div>
</div>
<div id="upcoming">
<div class="label">Three-day forecast</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./weather.js"></script>
</body>
</html>
Please check the working demo
https://jsfiddle.net/o2gxgz9r/73662/
$(document).ready(function() {
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
alert(userLocation);
}
});