'this.variable' Objektelement in dem separaten Datei

Question

HTML-Code:

<input class="jscolor" id="color-picker"> 

    <div id="rect" class="rect"></div> 

    <script src="jscolor.js"></script> 
    <script src="skrypt.js"></script> 

Javascript-Code:

function update(jscolor) { 
     document.getElementById('rect').style.backgroundColor = '#' + jscolor; 
} 

window.onload=function() { 
    document.getElementById('color-picker').onchange = update(this.jscolor); 
} 

in Probe über Funktion 'Update' funktioniert nicht korrekt, aber wenn ich Einführung dieser Funktion in html

<input class="jscolor" id="color-picker" onchange="update(this.jscolor)"> 

ist alles in Ordnung.

Also meine Frage ist, wie, nach den guten Trends, loszuwerden Ereignis induzieren von HTML und verschiebe es in separate Javascript-Datei?

Answer 1

Sie sollten this innerhalb der Funktionskörper Adresse:

document.getElementById('color-picker').onchange = function() { 
    update(this.jscolor); 
}; 

Answer 2

...onchange = update(this.jscolor) 

Diese update zu der Zeit ausgeführt wird, wenn Sie den Event-Handler anhängen.

onchange="update(this.jscolor)" 

Dies führt update zur Zeit das Ereignis ausgelöst wird.

Um programmatisch einen Event-Handler anhängen, die zum Zeitpunkt des Ereignisses ausgelöst wird, dies zu tun:

document.getElementById('color-picker').addEventListener('change', function() { 
    update(this.jscolor); 
}); 

Answer 3

Wenn Sie einen Best-Practice unaufdringlich Ansatz suchen, versuchen so etwas wie die unten Schnipsel.

N.B. Offensichtlich ist das folgende Snippet ein sehr einfaches Beispiel, weil .rect nur zu einem background-color (rot) wechselt, aber Sie können das Skript so ändern, dass .rect zu einer beliebigen Anzahl von background-color Werten wechseln kann.

var jscolor = 'rgb(255,0,0)'; 
 

 
function update(jscolor) { 
 
    var rect = document.getElementsByClassName('rect')[0]; 
 
    rect.style.backgroundColor = jscolor; 
 
} 
 

 
function colorUpdate() { 
 
var colorPicker = document.getElementsByClassName('color-picker')[0]; 
 
colorPicker.addEventListener('click',function(){update(jscolor);},false); 
 
} 
 

 
window.addEventListener('load',colorUpdate,false);

.color-picker, .rect { 
 
float: left; 
 
width: 100px; 
 
height: 100px; 
 
margin-right: 40px; 
 
} 
 

 
.rect { 
 
background-color: rgb(236,236,236); 
 
}

<div class="color-picker">Click Me to give Rect a red background</div> 
 
<div class="rect">Rect</div>