Hur man tilldelar värdet från <div id="heading"></div> till en bokstav?

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

Hur man tilldelar värdet från <div id="heading"></div> till en bokstav?

Jag har en GPS program och vill att med grader ska visas också en bokstav - N, NE, E, SE och så vidare.
Anta att dokument.getElementById ("exempel"). InnerHTML = txt; ."exempel" tar txt värdet och sedan kommer det att visas med <div id="exampel"></div>. Frågan är hur man gör motsatsen. Det vill säga z (till exempel) ska ha värdet av <div id = "example"></div>.
Tackat för hjälpen

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

@Valentin1:
Skriv mer specifikt vad du vill göra.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

Jag har en GPS program och vill att med grader ska visas också en bokstav - N, NE, E, SE och så vidare.
Anta att dokument.getElementById ("exempel"). InnerHTML = txt; ."exempel" tar txt värdet och sedan kommer det att visas med <div id="exampel"></div>. Frågan är hur man gör motsatsen. Det vill säga z (till exempel) ska ha värdet av <div id = "example"></div>.
Tackat för hjälpen

Är en aning förvirrad. Vad är z i detta fall?
Angående divs så säger man innerHTML, värde är för inputs. Men som jag tolkar det vill du spara innerHTMLn i en variabel? Du får förtydliga din fråga, gärna med ett litet större kodexempel. 🤔

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf:
I en js fil har jag:
k("heading").innerText = (b.getHeading() * 57.2957795).toFixed(1),
I html fil har jag:
Heading (kurs): <code id="heading class="distance"></code><code id="example" class="distance"></code>

<script type="text/javascript">
$(document).ready(function() {
var txt = "";

if (z <= 22.5) {
txt += "N";
} else if (z < 67.5) {
txt += "NE";
} else if (z <= 112.5) {
txt += "E";
} else if (z < 157.5) {
txt += "SE";
} else if (z <= 202.5) {
txt += "S";
} else if (z < 247.5) {
txt += "SW";
} else if (z <= 292.5) {
txt += "W";
} else if (z < 337.5) {
txt += "NW"
} else if (z < 360.5) {
txt += "N";
}

document.getElementById("example").innerHTML = txt;

});
</script>
Nu vill jag att z ska ha "heading" värde för att till slut visa vid grader också bokstav N eller annat.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

@Valentin1:

Om jag tolkar det rätt, du har dina koordinater code-taggen med id heading, som du vill spara ner i variabeln z och jämföra i dina if-satser?
Det är väl bara att köra på samma sätt i din JS?

const z = document.querySelector("#heading").innerHTML;

Förutsatt att värdet du hämtar är i taggen?

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf: Hej
Tyvärr det funkade inte. Fast den visar hela tiden bokstav N. Har du annan ide?
Du tolkar rätt.
MVH
Valentin

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@zaibuf: Hej
Tyvärr det funkade inte. Fast den visar hela tiden bokstav N. Har du annan ide?
Det är som du säger.
MVH
Valentin

Kan vara att du missat att stänga din id attribute för första codeblocket.

<code id="heading class="..." // nu <code id="heading" class="..." // testa

Fungerande jsfiddle -> fiddle

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf: Nu har jag stäng som du sa men det hjälpte inte. Har du nån ide?

Trädvy Permalänk
Medlem
Plats
Söderbärke
Registrerad
Nov 2010
Skrivet av Valentin1:

@zaibuf: Nu har jag stäng som du sa men det hjälpte inte. Har du nån ide?

Han har länkat en jsfiddle som fungerar med din kod + hans fix. Om du ser över hans jsfiddle och din kod, ser de likadana ut?

Min gissning, eftersom du alltid får ut txt=N, är att värdet som visas i #heading inte är korrekt. För att testa kan du ändra

document.getElementById("example").innerHTML = txt;

till

document.getElementById("example").innerHTML = z;

i felsökningssyfte. då borde den istället för att visa korrekt väderstreck, åtminstone visa rätt värde tillhörande det väderstrecket. (alltså, förväntar du dig att den ska skriva ut SE borde z vara någonstans mellan 112.5 och 157.5)

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@NisseG91: Nej, det är samma sak fast N försvann.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@NisseG91: Nej, det är samma sak fast N försvann.

Om du selectar z som ovan och lägger det i en console.log(z); vad får du ut i din console?

Alltså
const z = document.querySelector("#heading").innerHTML;

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@Valentin1: Om jag tilldelar z värdet för hand - tex var z = 2;, document.getElementById("example").innerHTML = txt; fungerar som det skulle.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@Valentin1: Om jag tilldelar z värdet för hand - tex var z = 2;, document.getElementById("example").innerHTML = txt; fungerar som det skulle.

Kan bero på vad du har för värde i ditt html code-block då. Kanske inte beräknar och skriver värdet du förväntar dig att det ska.
Har testat att manuellt skriva in värdet mellan code-blocket och den applicerar rätt vädersträck efter koordinaterna, som du kan testa själv i fiddle.

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@Valentin1: Det tog lite tid men jag fick ingenting.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@Valentin1: Det tog lite tid men jag fick ingenting.

Då är det något med koden där du får fram koordinaterna som spökar, du får kika på det

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf: ok tackar

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@Valentin1: Ditt const z = document.querySelector("#heading").innerHTML; är ok. Nu måste jag hitta varför funkar det inte med mitt k("heading").innerText = (b.getHeading() * 57.2957795).toFixed(1).

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@Valentin1: Ditt const z = document.querySelector("#heading").innerHTML; är ok. Nu måste jag hitta varför funkar det inte med mitt k("heading").innerText = (b.getHeading() * 57.2957795).toFixed(1).

Kör du fast behöver du dela mer kod, vet inte vad k("heading") eller b.getHeading() är i detta fall.

k("heading") ser dock suspect ut. Heading i detta fall är ett id, och då bör du skriva #heading om du ska selecta noden på det viset, sedan är jQuery selectorn $ inte k.
Sen verkar det som du blandar jQuery och vanilla JS, bästa är att inte hålla på blanda utan välj en av syntaxen och kör på det.

// jQuery $("#heading").text((b.getHeading() * 52.296695).toFixed(1)); // JavaScript document.querySelector("#heading").innerHTML = (b.getHeading() * 52.296695).toFixed(1);

med antaget att getHeading() är en function du invokar, ingen aning vad b är i detta fall dock.

Exempel: fiddle

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf:Hej
För test har jag lagt till js filen: k("heading3").innerText = 133 och tilldelade z alla form av "heading3" i HTML filen. Men det blev inget. Om du vill du kan titta på filen på: szukaj-trasy.com/test.htm
Längst ner hämtas två filer:
<script src="geolocation/common.js"></script>
<script src="geolocation/geolocation_test.js"></script> för att GPS ska fungera.
För att se vad som händer måste man titta med mobilen och GPS inkopplad.
MVH
Valentin

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@zaibuf:Hej
För test har jag lagt till js filen: k("heading3").innerText = 133 och tilldelade z alla form av "heading3" i HTML filen. Men det blev inget. Om du vill du kan titta på filen på: szukaj-trasy.com/test.htm
Längst ner hämtas två filer:
<script src="geolocation/common.js"></script>
<script src="geolocation/geolocation_test.js"></script> för att GPS ska fungera.
För att se vad som händer måste man titta med mobilen och GPS inkopplad.
MVH
Valentin

Kommer inte åt filerna och även om jag kommer åt hela filerna så har jag inte möjlighet att sitta och felsöka två JS filer utan att veta vad jag ska kolla efter.

k("heading3").innerText = 133
Detta är fortfarande felaktig syntax.

Vad är k?
Vad är heading3?

Enklaste är om du skriver hela din JS fil som du skrivit nu (eller åtmintone partiet i fråga), sen vad du vill ska hända så kan jag kika på det. För om jag kikar på koden du har skrivit ovanför så fungerar det med codepen, förutom delen där du hämtar värde vilket är en annan fråga i sig.

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf: Hej
Filen common.js är väldigt stort - 700 kb.
Här filen geolocation_test.js:

(window.webpackJsonp = window.webpackJsonp || []).push([[45], { 271: function(e, n, t) { "use strict"; t.r(n); var a = t(20), c = t(170), r = t(1), o = t(0), i = t(386), s = t(26), u = t(3), g = t(18), w = t(4), d = t(13), l = t(70), m = t(218), y = t(74), p = t(73), f = new o.a({ center: [921371.9389, 6358337.7609], zoom: 5 }), h = new r.a({ layers: [new u.a({ source: new w.b })], target: "minmap", controls: Object(i.a)({ attributionOptions: { collapsible: !1} }), view: f }), b = new c.a({ trackingOptions: { enableHighAccuracy: !0 }, projection: f.getProjection() }); function k(e) { return document.getElementById(e) } k("track").addEventListener("change", function() { b.setTracking(this.checked) }), b.on("change", function() { k("accuracy").innerText = b.getAccuracy().toFixed(1) + " [m]", k("altitude").innerText = b.getAltitude().toFixed(1) + " [m]", k("altitudeAccuracy").innerText = (b.getAltitudeAccuracy() * 1).toFixed(1) + " [m]", k("heading").innerText = (b.getHeading() * 57.2957795).toFixed(1) + " [\u00b0]", k("heading3").innerText = 133, k("speed").innerText = (b.getSpeed() * 3.6).toFixed(1) + " [km/h]" }), b.on("error", function(e) { var n = document.getElementById("info"); n.innerHTML = e.message, n.style.display = "" }); var v = new a.a; b.on("change:accuracyGeometry", function() { v.setGeometry(b.getAccuracyGeometry()) }); var A = new a.a; A.setStyle(new l.c({ image: new m.a({ radius: 6, fill: new y.a({ color: "#3399CC" }), stroke: new p.a({ color: "#808080", width: 1 }) }) })), b.on("change:position", function() { var e = b.getPosition(); A.setGeometry(e ? new s.a(e) : null) }), new g.a({ map: h, source: new d.b({ features: [v, A] }) }) } }, [[271, 0]]]);
//# sourceMappingURL=geolocation.js.map

Biten k("heading3").innerText = 133, har jag skapad enbart för testen. k är för att "heading3" ska kunna visas i HTML filen. Frågan är att tilldela värdet av id="heading" till bokstav z. Jag är nära med:
var heading3 = document.getElementById('heading3').innerHTML;
var z = heading3.innerHTML;
Men ändå z vill inte ha värdet av heading3.
MVH
Valentin

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

Biten k("heading3").innerText = 133, har jag skapad enbart för testen. k är för att "heading3" ska kunna visas i HTML filen. Frågan är att tilldela värdet av id="heading" till bokstav z. Jag är nära med:
var heading3 = document.getElementById('heading3').innerHTML;
var z = heading3.innerHTML;
Men ändå z vill inte ha värdet av heading3.
MVH
Valentin

Ok, förstår nu att k är en function som returerar en node by ID. Inte vad jag hade namngett den, men ok

Vad är heading3? En div?
bör vara

var heading3 = document.getElementById('heading3').innerHTML; var z = heading3.innerHTML; let z = document.getElementById('heading3').innerHTML;

Som du skrev hämtar du heading3.innerHTML sparar den i heading3, sen hämtar du heading3.innerHTML igen?
Är det en specifik node i diven du vill åt så är det bättre att använda queryselector eller children / parents.

Trädvy Permalänk
Medlem
Registrerad
Feb 2019

@zaibuf: Med biten: let z = document.getElementById('heading3').innerHTML; z får värdet 0 (bokstav N). Kan du ge ett exempel på ditt sist nämnda?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Valentin1:

@zaibuf: Med biten: let z = document.getElementById('heading3').innerHTML; z får värdet 0 (bokstav N). Kan du ge ett exempel på ditt sist nämnda?

Kör console.log på z, känns snarare som att din div inte ger värdet du förväntar dig. Svårt att hjälpa dig felsöka när jag inte har relevant kod att jobba med.

Vet inte hur din DOM ser ut eller vilket värde du ska hämta, men får du 0 så är det ju 0 som står i den du hämtar. Då bör ju själva selectorn fungera, då är det snarare något annat som är fel, att du inte får värdet du vill ha.

exempel på nth selectors.

Skickades från m.sweclockers.com