Почему вы ничего не видите:
Проблема не в том, что вы вызываете fetch из функции, а в том, что вы вызываете эту функцию внутри onclick кнопки в форме.
Когда вы помещаете элемент <button> в элемент <form>, его поведение по умолчанию - отправка формы (публикация результатов на другой веб-странице и загрузка этой новой страницы в браузер). Поскольку ваша форма не имеет атрибута action, она просто перезагрузит текущую страницу. Эта перезагрузка текущей страницы приводит к тому, что вы не видите никаких результатов.
Исправление первой проблемы:
Чтобы предотвратить возврат формы, вам нужно вызвать preventDefault() в случае события, переданного вашей функции:
function myFunction(event){
event.preventDefault();
fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
.then(response => response.text())
.then(data => {
//document.write(data)
console.log(data)
});
//make sure the function was called
console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}
Второй выпуск
Однако из-за способа вызова этой функции (передачи ее методу onclick элемента HTML) у вас нет доступа к этому событию. Чтобы исправить это, вы должны использовать метод addEventListener следующим образом:
document.getElementsByTagName("button")[0].addEventListener("click", myFunction);
Если вы дадите кнопке идентификатор, его можно заменить на:
document.getElementById("button-id").addEventListener(...)
Третий выпуск
Вы передаете 'carrier' непосредственно в вашу функцию, но я предполагаю, что вы хотите прочитать значение из элемента <select>. Для этого вы должны использовать document.getElementById и .value, чтобы прочитать выбор:
var carrier = document.getElementById("carrier").value;
Как только вы это сделаете, вы можете использовать carrier в вашем fetch запросе
Четвертый номер
Как уже упоминали другие в комментариях, вам следует избегать звонков на document.write. Есть книги, написанные о том, почему это плохо, но правильный ответ - использовать DOM API для изменения элементов на странице. Например:
var p = document.createElement("p");
p.innerHTML = data;
document.appendChild(p);
Финальный код
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ghibli App</title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<form>
<select id="carrier">
<option value="carrier">Carrier</option>
<option value="icloud">iCloud</option>
</select>
<button id="button-id">Submit</button>"
</form>
<script src="scripts.js"></script>
</body>
</html>
script.js
function myFunction(event){
event.preventDefault();
var carrier = document.getElementById("carrier").value;
fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999&carrier=' + carrier)
.then(response => response.text())
.then(data => {
var p = document.createElement("p");
p.innerHTML = data;
document.appendChild(p);
});
}
document.getElementById("button-id").addEventListener("click", myFunction);