Вызов переменных из другой функции

Когда вы помещаете свои коды непосредственно в тело тега «script», он будет выполняться только один раз (при загрузке скрипта). Вам нужно поместить свои коды в место, которое может запускаться более одного раза, например, поместить его в функцию и вызывать ее при возникновении события.

Если вам нужно, чтобы блок «если» запускался каждый раз, когда изменяется раскрывающееся значение, у вас есть следующие варианты: 1- переместите свой код в функцию getDocument 2- переместите блок «если» в новую функцию, а затем вызовите его в функции getDocument.

Или 3- переместите свой блок «если» в новую функцию, а затем назначьте его другому событию, совпадающему с событием выпадающего списка (например, выпадающее меню при изменении или выпадающее меню при размытии)

1. Оберните код для выполнения в событии DOMContentLoaded.
2. Переместите функцию getDocument за пределы этого прослушивателя событий.
3. Я предполагаю, что у вас уже есть прослушиватель событий выбора опции, и у вас есть переменная с именем SelectOption с выбранным значением

Вы можете попробовать следующий код:

<script>
  // Function extracts and returns value from provided parameter
  function getDocumentValue(option) {
    return option.value;
  }

  window.addEventListener('DOMContentLoaded', () => { 
    const documentLink = document.getElementById('documentLink'); // Id is fine if we are sure it wont be duplicated.
    const chosenDocument =  getDocumentValue(SelectOption);

    if (chosenDocument === "Google" ) {
        documentLink.href = "https://www.google.com";
        } else if (chosenDocument === "duckduckgo") {
        documentLink.href = "https://www.duckduckgo.com";
    }   
 })
            
</script>

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

// Select the element
const select = document.querySelector('select');

// Add an event listener to it to watch out for changes
// and when that listener is fired call the handleChange function
select.addEventListener('change', handleChange, false);

// Here is an object containing routes
// The keys map directly to the values of the options
const routes = {
  google: 'https://www.google.com',
  duckduckgo: 'https://www.duckduckgo.com'
}

// So that when the function is called all
// we need to do is get the value of that particular route
function handleChange() {
  console.log(routes[this.value]);
}

<select>
  <option disabled selected>Choose</option>
  <option value="google">Google</option>
  <option value="duckduckgo">duckduckgo</option>
</select>

Дополнительная документация

• addEventListener

• querySelector

• Работа с объектами

Ваша проблема связана с областями действия. Объявите переменную снаружи, чтобы она находилась в области окна, а не в области функции:

var documentLink = document.getElementById('documentLink');
var chosenDocument;

function getDocument(option) {
    chosenDocument = option.value;
}
 
            
if (chosenDocument === "Google" ) {
    documentLink.href = "https://www.google.com";
} else if (chosenDocument === "duckduckgo") {
    documentLink.href = "https://www.duckduckgo.com";
}  

В качестве альтернативы вы можете изменить свою функцию, чтобы она возвращала значение (ее название указывает на то, что она что-то возвращает):

var documentLink = document.getElementById('documentLink');

function getDocument(option) {
    return option.value;
}
 
            
if (getDocument() === "Google" ) {
    documentLink.href = "https://www.google.com";
} else if (getDocument() === "duckduckgo") {
    documentLink.href = "https://www.duckduckgo.com";
}