var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1PzTMW6xH5cjLgvLn_LOq25XEbmrCw2MP9C9vvt4rhoM/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var TEXT = ourData.feed.entry[2].gs$cell.inputValue;
var IMG = ourData.feed.entry[3].gs$cell.inputValue;
console.log(TEXT);
console.log(IMG);
document.getElementById('testoutput').innerHTML = TEXT;
document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";
};
ourRequest.send();
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Hide scrollbars */
}
div {
text-align: left;
min-height: 100%;
font-family: motiva-sans, sans-serif;
font-weight: 800;
font-size: 15vw;
padding: 15px;
padding-top: 30px;
padding-left: 10%;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.typekit.net/vbl6jef.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Google Sheets - Werkend</title>
</head>
<body>
<div id="backgroundIMG"><div>
<div id="testoutput"></div>
</body>
</html>
Я работаю над документом HTML, стилизация которого основана на данных Google Sheets JSON. Пока что это работает для установки свойств, таких как backgroundColor.
Прямо сейчас я пытаюсь установить backgroundImage и установил переменную, содержащую URL: document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";
Когда я console.log переменная, она возвращает URL очень хорошо. Когда я помещаю URL прямо в код выше, это работает. Когда я помещаю переменную в код (как показано выше), она не загружает URL.
Мои ограниченные знания мешают мне искать правильные термины о том, что здесь происходит. Я пытался читать по переменным, но пока безуспешно.
Может ли кто-нибудь указать мне правильное направление, либо сообщив мне, что читать дальше, либо предложив решение на основе моего кода ниже?