Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Molecula</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body onload = "start()">
    <form>
		<!-- окно для ввода формулы/названия молекулы -->
        <input type="text" size="50" id="searchbox" border="5" placeholder="search here..."
		style="height:2%; width:20%; position:fixed; top:4%; left:39%;"
		onchange="getMolecula()">

	    <!-- кнопки для переключения стилей отображения -->
	    <button id="ball_stick" style="height:3%; width:12%; position:fixed; left:17%; top:9%;"> Ball-and-stick </button>
	    <button id="spacefill"  style="height:3%; width:12%; position:fixed; left:30%; top:9%;"> Spacefill </button>
	    <button id="stick"      style="height:3%; width:12%; position:fixed; left:43%; top:9%;"> Stick </button>
	    <button id="wireframe"  style="height:3%; width:12%; position:fixed; left:56%; top:9%;"> Wireframe </button>
	    <button id="surface"    style="height:3%; width:12%; position:fixed; left:69%; top:9%;"> Surface </button>

	    <!-- кнопки переключения режима отображения -->
	    <button id="view"    style="height:4%; width:14%; position:fixed; left:34%; top:14%;"> View Mode </button>
	    <button id="compare" style="height:4%; width:14%; position:fixed; right:34%; top:14%;"> Compare Mode </button>
    </form>

    <!-- холст для отрисовки молекулы -->
    <canvas id="glcanvas" style="height:70%; width:80%; position:fixed; top:22%; left:10%"></canvas>
    <script type="text/javascript" src="code/openGL.js"></script>
</body>
</html>

-----------------------------------

let gl, canvas, current_molecula;

const start = () => {
  canvas = document.getElementById("glcanvas");

  gl = initWebGL(canvas);      // инициализация контекста GL

  // продолжать только если WebGL доступен и работает

  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
    gl.enable(gl.DEPTH_TEST);                               // включает использование буфера глубины
    gl.depthFunc(gl.LEQUAL);                                // определяет работу буфера глубины: более ближние объекты перекрывают дальние
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // очистить буфер цвета и буфер глубины.
  }
}

const initWebGL = (canvas) => {
  gl = null;

  try {
    // Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  // Если мы не получили контекст GL, завершить работу
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
    gl = null;
  }

  return gl;
}

// функция вызывается в случае ввода текста в поле для идентификации молекулы
const getMolecula = () => {
	let text = document.getElementById("searchbox").value;
	if (text) {
		// alert(text)
		current_molecula = text;


		//Обращение к серверу
		const status = (response) => {
			if (response.status !== 200) {
				return Promise.reject(new Error(response.statusText))
			}
		    return Promise.resolve(response)
		}
		const json = (response) => {
			return response.json()
		}

		let link = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/fastformula/" + current_molecula + "/JSON";

		//Скачивание по ссылке
		fetch(link)
		.then(status)
		.then(json)
		.then(function (data) {
			alert(data)
		})
		.catch(function (error) {
			alert(error)
		})

	}
}