ma taille de police localstorage ne fonctionnait pas initialement

Question

ma taille de police localstorage + - bien en général, après le chargement initialement taille de police + 2 obtenir la valeur de chaîne, par exemple, taille de police initiale (16) + 2 = 162. la valeur de taille initiale doit être une variable et non une simple chaîne. Toutefois, la taille de la police initiale, valeur getitem localstorage est une chaîne. Ensuite, cela fonctionne bien. Comment puis-je convertir la valeur initiale de la taille de la police en variable? Merci d'avance pour votre réponse.

<div id="font-size-change"> 
    <span class="font-size-label">font size</span> 
    <button id="fs_up">+</button> 
    <span id="fs_write" style="width:15px;"></span> 
    <button id="fs_down">-</button> 
</div> 

<script> 
$(document).ready(function() { // === Font Size Control ============================================================= 
    var reset = $('#stx').css('fontSize'); // Grab the default font size 
    var elm = $('#stx'); // Font resize these elements 
    var size = localStorage.getItem('size'); 
    var size = parseInt(size, 10); 

    if (size) { 
    elm.css('font-size', size + 'px'); 
    $("#fs_write").text(size); // 
    } else {  
    size = str_replace(reset, 'px', ''); //set the default font size and remove px from the value 
    $("#fs_write").text(size); // 
    } 

    var min = 12; //min 
    var max = 56; //max 
    var p = 4; //increase 
    var m = 4; //decrease 

    $('#fs_up').click(function() { //Increase font size 

    if (size <= max) { //if the font size is lower or equal than the max value 
     size = size + p; //increase the size  
     elm.css({ //set the font size 
    'fontSize': size 
     }); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    }  
    return false; //cancel a click event 
    }); 

    $('#fs_down').click(function() {  
    if (size >= min) { //if the font size is greater or equal than min value  
     size = size - m; //decrease the size  
     elm.css({ //set the font size 
    'fontSize': size 
     }); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    } 
    return false; //cancel a click event 
    }); 

    $('#fs_write').click(function() { //Reset the font size 
    elm.css({ //set the default font size 
     'fontSize': reset 
    }); 
    size = str_replace(reset, 'px', ''); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    }); 

}); 

//A string replace function 
function str_replace(haystack, needle, replacement) { 
    var temp = haystack.split(needle); 
    return temp.join(replacement); 
} 

</script> 

Answer 1

Explication:

C'est parce que l'opérateur + est utilisé à la fois comme un opérateur arithmithic (si les deux opérandes sont des nombres), et comme un opérateur de concaténation de chaîne (si au moins l'un des opérandes est un string).

Votre variable size est initialement un nombre que vous utilisez parseInt au début de votre code pour obtenir sa valeur. Mais dans l'écouteur d'événement de clic #fs_write vous Tranform nouveau dans une chaîne:

size = str_replace(reset, 'px', '');  // size is now a string because the return value of str_replace is a string 

puis lorsque le #fs_up clic se produit, vous ajoutez p-size (qui est maintenant une chaîne):

size = size + p;       // string concatenation is chosen over arithmitic addition because one of the operands (size) is a string 

qui provoque le problème.

Solution:

Il suffit de transformer size en un certain nombre avant d'utiliser l'opérateur + utilisant: Number, parseInt ou l'opérateur unary +:

size = +size + p;      // using the unary + (now size is a number and p is also a number thus the arithmitic addidtion is chosen over the string concatenation) 
// or 
size = Number(size) + p;     // using Number 

Notes:

1. L'écouteur d'événement click #fs_down ne cause pas le problème car l'opérateur - est utilisé uniquement comme un opérateur arithmétique. Donc, quand un ou les deux opérandes sont une chaîne, il est automatiquement utilisé comme un nombre ("55" - "10" === 45 mais "55" + 10 === "5510").
2. Vous êtes en train de redéclarer size au début de votre code qui n'est pas nécessaire. Laissez le premier var size = ...; et utilisez le deuxième size = ...; sans le var.