Hoe kan ik een veld met getElementById pakken nadat een gebruiker het heeft getypt?

Ik heb een colorpicker-veld dat wordt geladen met een standaardkleur en vervolgens kan de bezoeker de invoerwaarde wijzigen met een kleurenwiel of gewoon door de tekst te wijzigen. Ik heb JavaScript dat de waarde van de colorpicker neemt en zet de link href ernaast op die waarde.

Het probleem is dat wanneer de pagina wordt geladen, de linkknop is ingesteld op de standaardwaarde in de colorpicker, maar wanneer de bezoeker deze waarde wijzigt, wordt de link href niet gewijzigd om dit weer te geven zonder een vernieuwing.

Here is the live site: http://www.brainbuzzmedia.com/themes/vertex/

Hier is het JavaScript dat ik heb:

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

var a = document.getElementById('colorLink');
var color = document.getElementById('color-demo').value;
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;

});
</script>

En hier is de html waar de invoer van de colorpicker en de link worden toegevoegd:

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onChange="refresh()"/>LINK
 0
toegevoegd BRAINBUZZ media
Bekeken: 6
de bron
ja ru fr es pt de

3 antwoord

Voer die code uit wanneer de waarde verandert

$("#color-demo").change(function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});
2
toegevoegd
de bron
Hier is een viool die een variatie hiervan laat zien: jsfiddle.net/d4dYf/1
toegevoegd de auteur nEx.Software, de bron
Ik heb de code zojuist gewijzigd, maar er gebeurt niets. Geen link voor of na het instellen van een nieuwe kleur.
toegevoegd de auteur BRAINBUZZ media, de bron
Ja! Dat werkt! Dank aan allen voor de hulp.
toegevoegd de auteur BRAINBUZZ media, de bron
bedankt @ nEx.Software - het lijkt te werken BRAINBUZZ, de verandering gebeurt wanneer ze eenmaal wegklikken
toegevoegd de auteur matt3141, de bron

document.getElementById ("color-demo"). onblur = function() {
  var a = document.getElementById ('colorLink');
  var color = document.getElementById ('color-demo'). waarde;
  a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + kleur;
  }

of doe dit:

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onchange="Refresh(this.value)"/>

functie Vernieuwen (kleur) {
  var a = document.getElementById ('colorLink');
  a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + kleur;
  }

0
toegevoegd
de bron

Probeer de waarde op KeyUp, KeyDown en Blur -gebeurtenis van het tekstvak in te stellen .. zoals dit ..

$("#color-demo").bind("keyup keydown blur",{},function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});
0
toegevoegd
de bron
Plaats de bovenstaande code in het consolevenster en voer het uit. Probeer vervolgens de waarde te wijzigen en controleer de "href" van de link naast het tekstvak.
toegevoegd de auteur hriziya, de bron
Er lijkt niets te gebeuren, zo is het nu.
toegevoegd de auteur BRAINBUZZ media, de bron