Wie verkette ich eine Zeichenfolge mit einer Variablen?

76

Ich versuche also, aus einem String und einer übergebenen Variablen (die eine Zahl ist) einen String zu machen. Wie mache ich das?

Ich habe so etwas:

function AddBorder(id){
    document.getElementById('horseThumb_'+id).className='hand positionLeft'
}

Wie bekomme ich dieses 'HorseThumb' und eine ID in eine Zeichenfolge?

Ich habe all die verschiedenen Optionen ausprobiert, auch gegoogelt und abgesehen davon, dass ich eine Variable in eine solche Zeichenfolge einfügen kann getElementById("horseThumb_{$id}")<- (hat bei mir nicht funktioniert, ich weiß nicht warum), fand ich nichts Nützliches. Daher wäre jede Hilfe sehr dankbar.

javascript necker
quelle
9
Genau so, wie du es gemacht hast. Aber wenn Sie explizit sein möchten, können Sie ändern idzu id.toString().
20.
4
Ja, du hast es richtig gemacht. Wenn es "nicht funktioniert", stimmt etwas anderes nicht, als ob es tatsächlich kein Element mit dieser ID gibt.
Ben Zotto
1
Dieser Code: getElementById("horseThumb_{$id}")ist kein JavaScript, sondern PHP. Deshalb hat es bei Ihnen nicht funktioniert.
Domenic
1
Ihre Syntax ist richtig, aber überprüfen Sie die Groß- und Kleinschreibung des Elements. Denken Sie daran, dass bei Javascript zwischen Groß- und Kleinschreibung unterschieden wird. Bei einigen Browsern können Sie ein Element finden, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird, aber nicht alle Browser tun dies
Sparky
1
@Cory Das sollte niemals gebraucht werden. Das id-Argument ist mit einem String verkettet, ergo wird es zum String-Typ gezwungen. Ein anderer Fall wäre, wenn Sie nicht wissen würden, um welchen Typ es sich bei dem anderen Operator handelt. In diesem Fall handelt es sich jedoch um ein Zeichenfolgenliteral, sodass kein Casting erforderlich ist.
Šime Vidas

Antworten:

62

Ihr Code ist korrekt. Möglicherweise besteht Ihr Problem darin, dass Sie keine ID an die AddBorderFunktion übergeben oder dass ein Element mit dieser ID nicht vorhanden ist. Oder Sie führen Ihre Funktion aus, bevor das betreffende Element über das DOM des Browsers zugänglich ist.

Fügen Sie diese als erste Zeilen in die Funktion ein, um den ersten Fall zu identifizieren oder die Ursache für den zweiten Fall zu ermitteln:

alert('ID number: ' + id);
alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id));

Dadurch werden bei jedem Aufruf der Funktion Popup-Fenster mit dem Wert von idund dem Rückgabewert von geöffnet document.getElementById. Wenn du bekommstundefined das Popup für die ID-Nummer erhalten, übergeben Sie kein Argument an die Funktion. Wenn die ID nicht vorhanden ist, erhalten Sie Ihre (falsche?) ID-Nummer im ersten Popup, aber nullim zweiten.

Der dritte Fall würde eintreten, wenn Ihre Webseite so aussieht und versucht, ausgeführt zu werden, AddBorderwährend die Seite noch geladen wird:

<head>
<title>My Web Page</title>
<script>
    function AddBorder(id) {
        ...
    }
    AddBorder(42);    // Won't work; the page hasn't completely loaded yet!
</script>
</head>

Um dies zu beheben, fügen Sie den gesamten Code, der AddBorder verwendet, in einen onloadEreignishandler ein:

// Can only have one of these per page
window.onload = function() {
    ...
    AddBorder(42);
    ...
} 

// Or can have any number of these on a page
function doWhatever() {
   ...
   AddBorder(42);
   ...
}

if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);
PleaseStand
quelle
Es wird nicht funktionieren für einige eingebettete JavaScript-Engines - wie z. B. mJS - führt zu dem Fehler wie MJS callback error: implicit type conversion is prohibited. Für diesen Fall ist eine explizite Typkonvertierung erforderlich
N0dGrand87
32

In Javascript wird der Operator "+" verwendet, um Zahlen hinzuzufügen oder Zeichenfolgen zu verketten. Wenn einer der Operanden eine Zeichenfolge "+" ist, werden sie verkettet, und wenn es sich nur um Zahlen handelt, werden sie hinzugefügt.

Beispiel:

1+2+3 == 6
"1"+2+3 == "123"
Stewe
quelle
8
Und nur zum Spaß, was ist das Ergebnis von : 2 + "3" - 5? (kein Betrug)
Oder noch besser das Ergebnis von : 4+"5"-3?
Matsr
6
zu spät, um zu antworten, aber ... 2 + "3" ergibt "23" (durch Verkettung) und "23" - 5 ergibt 18 (Subtraktion analysiert den String) Sie können ihn in Ihrer Konsole testen ...
Kadiri
2
Vergessen Sie niemals, dass die Operatoren von links nach rechts ausgewertet werden, also:1+2+'3'+4+5 // 3345
Julien Bérubé
4

Dies kann passieren, weil das Java-Skript manchmal Leerzeichen zulässt, wenn eine Zeichenfolge mit einer Zahl verknüpft ist. Versuchen Sie, die Leerzeichen zu entfernen, eine Zeichenfolge zu erstellen und diese dann an getElementById zu übergeben.

Beispiel:

var str = 'horseThumb_'+id;

str = str.replace(/^\s+|\s+$/g,"");

function AddBorder(id){

    document.getElementById(str).className='hand positionLeft'

}
Rahul Das Gupta
quelle
1

Es ist genau wie du. Und ich gebe Ihnen einen kleinen Tipp für diese Art von dummen Dingen: Verwenden Sie einfach das Browser-URL-Feld, um die js-Syntax auszuprobieren. Schreiben javascript:alert("test"+5)Sie zum Beispiel Folgendes: und Sie haben Ihre Antwort. Das Problem in Ihrem Code ist wahrscheinlich, dass dieses Element in Ihrem Dokument nicht vorhanden ist. Vielleicht befindet es sich in einem Formular oder so. Sie können dies auch testen, indem Sie in die URL schreiben: um javascript:alert(document.horseThumb_5)zu überprüfen, wo Ihr Fehler liegt.

RoeeK
quelle
0

Eine andere Möglichkeit, es mit jquery einfacher zu machen.

Stichprobe: 

function add(product_id){

    // the code to add the product
    //updating the div, here I just change the text inside the div. 
    //You can do anything with jquery, like change style, border etc.
    $("#added_"+product_id).html('the product was added to list');

}

Wobei product_id die Javascript-Variable ist und $ ("# hinzugefügt _" + product_id) eine mit product_id verkettete Div-ID ist, die var from-Funktion add.

Freundliche Grüße!

Cassio Seffrin
quelle