Проблема
Я пытаюсь запустить элемент скрипта в html-файле, используя пакет webmake так, чтобы выполнение выполнялось точно так же, как и прямой запуск html-скрипта,но элемент сценария не становится активным для сгенерированного файла .html.
Входные файлы
- auto_sense.html
- auto_sense. js
- testfunction.html
Подробности
Я запускаю auto_sense.html как таковой через командную строку, и вывод, как и ожидалось,дает мне строку поиска, где, когда я набираю «букву», я получаю активированную функцию автозаполнения, которая дает мне предложения, вы найдете функцию autocomplete в элементе script внутри файла auto_sense.html
$ open -a "firefox" auto_sense.html
Теперь я пытаюсь заполнить variable words списком слов, которые бы возвращали значение другой функции javascript, и я не хочу жестко кодировать список по очевидным причинам. Для этого мне нужно использовать другую функцию javascript processWords, которая использует require, и, очевидно, я не могу использовать require в html, поскольку это невозможно сделать с помощью кода на стороне клиента, я пытаюсь сделать это с помощьюпакет называется webpack. Я прошел через Stackoverflow довольно давно, но пока не могу найти более простых или подробных шагов для этого.
Моя проблема - это когда я пытаюсь использовать webmake для объединениякод html и запуск файла .html, в котором bundletest.js сгенерирован через webmake, элемент script вообще не активируется. Пока это проблема, которую я хотел бы решить, как только я ее решу, я могу приступить к решению, используя require в пределах html. -> Мне нужна помощь с этим
Как запустить webmake через командную строку?
$ webmake auto_sense.js bundletest.js
$ open -a "firefox" testjsfunc.html
testjsfunc.html при запуске набраузер не активирует элемент script?
Ниже приведены все входные файлы
auto_sense.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font: 16px Arial;
}
/*the container must be positioned relative:*/
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Test Auto-Sense On Game Of Thrones</h2>
<p>Valar Doharis !</p>
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete"
>
<input id="myInput" type="text" name="words" placeholder="ValarMorgulis">
</div>
<input type="submit">
</form>
<script>
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
// function processWords()
// {
// var fs = require('fs');
// var words = "";
// fs.readFile("./gotchars.txt", 'utf-8', function read(err, text) {
// if (err) {
// throw err;
// }
// if (text){
// words = text.split('\n');
// }
// console.log(JSON.stringify(words));
// return words
// });
// }
// function processFile() {
// processWords();
// }
// console.log(processFile());
// var words = processFile();
//document.write(console.log(processWords()));
//console.log(words);
var words = [] # List of words kept empty intentionally
autocomplete(document.getElementById("myInput"), words);
</script>
</body>
</html>
processWords
/*An array some words at random from Game Of thrones:*/
function processWords()
{
var fs = require('fs');
var words = "";
fs.readFile("./gotchars.txt", 'utf-8', function read(err, text) {
if (err) {
throw err;
}
if (text){
words = text.split('\n');
}
console.log(JSON.stringify(words));
return words
});
}
function processFile() {
processWords();
}
processFile();
auto_sense.js
/*
Using webmake for generating HTML code
*/
document.title = "Simplified Auto sense";
require("../static/css/style");
document.body.innerHTML = require("./auto_sense.html");
var footer = document.body.appendChild(document.createElement("p"));
footer.className = "footer";
footer.innerHTML = "By Webmake";
testjsfunc.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body><script src="bundletest.js"></script>