глобальная переменная не обнаружена при использовании jquery, но нет ошибки

Question

Привет! :) Это может показаться глупым вопросом, но моя глобальная переменная не работает в функции jquery.

Здесь я создал переменную вне функции и назвал ее "css":

var css = ' {width: 200px; font-family: "Futura", sans-serif; text-align: center; flex-grow: 1; flex-basis: 0; padding: 8px 10px;}';

В функции, следующей за объявлением, я вызвал переменную "css" в функции jquery:

function create() {

var Elements = "";

var divId = "num";

for (var i = 0 + initial; i < 7 + initial; i++) {
  divId += i;
  Elements += '<div id=' + divId + '>' + i + '</div>';

  $('<style>' + '#' + css + '</style>').appendTo(document.head);
}

var container = document.getElementById("row");
container.innerHTML = Elements;

}

Но вывод не оформлен должным образом.Странная вещь, я не получаю никакой ошибки неопределенной переменной либо.И все прекрасно работает, когда я помещаю объявление переменной внутри function create().Но я не хочу этого, потому что у меня было бы несколько функций, подобных function create(), и было бы более эффективно, если бы я просто объявил переменную один раз.

Я подозреваю, что это из-за природы jquery?Любая помощь?

Answer 1

Кажется, что комментарий Криса Ли решил ваш вопрос, но ответа не было создано, и, похоже, этот вопрос не будет закрыт.

Если Крис Ли решит создать ответ, я удалюмой.

Также вместе с его ответом я настоятельно рекомендую не называть переменную Elements.Переменные в JavaScript не должны начинаться с заглавной буквы.Чтобы ознакомиться с соглашениями об именах переменных, ознакомьтесь с разделом «Имена переменных» в этом Руководстве по стилю JavaScript W3Schools

Я всегда нахожу, что код, работающий во фрагменте кода, легче увидеть, поэтому я создал егониже, чтобы продемонстрировать вашу проблему.

// Use const for variables that don't change and let for local variables instead of var
// if your browser environment supports it.
const css = '{width: 200px; font-family: "Futura", sans-serif; text-align: center; flex-grow: 1; flex-basis: 0; padding: 8px 10px;}';

function create() {

    // I have no idea what `initial` refers to so I'll just use a placeholder here.
    let initial = 0;

    let elements = '';
  
    let divId = 'num';
  
    for (let i = 0 + initial; i < 7 + initial; i++) {
  
        divId += i;
    
        elements += '<div id=' + divId + '>' + i + '</div>';
    
        // The above line can also be written using template literals.
        // elements += `<div id=${divId}>${i}</div>';
    
        $('<style>' + '#' + divId + css + '</style>').appendTo(document.head);
        
    }
    
    const container = document.getElementById('row');
    
    container.innerHTML = elements;
    
}

// Call the create function to see it in action.
create();

<div id='row'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>