I trie to programm a website where the user has to to input a word from an array to get some output.The output is supposed to be a popup.
I trie to combine a function that compares the input to the array and another one that controls a popup.
The struggle is that the popup doesnt work. It could be that I some code is in the wrong place. Please have a look at it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="text.js" rel="text"></script>
<scrpit src="p2.js" rel="javascript"></scrpit>
<title>The history of Socks</title>
</head>
<body>
<header class="container">
The history of Socks!
</header>
<div class="lb">Please type in a century including AC or BC!</div>
<div class="modal">
<div class="modal-dialog modal-content modal-header modal-body" id="print">
</div>
</div>
<input type="text" id="txt">
<button type="button" id="bu" class="btn" onclick="checktxt()"></button>
<div>
<ul>
<li> <a href="p2.js">Javascript</a></li>
<li> <a href="styles.css">style</a></li>
<li> <a href="text.js">Text</a></li>
<li> <a href="index.html">Main</a></li>
</ul>
</div>
</body>
</html>
const array1 = ["1stcenturyBC", "2ndcenturyBC"]
const array2 = ["3rdcenturyAC", "4thcenturyAC"]
function checktxt() {
let text;
var input = document.getElementById("txt").value;
var response = document.getElementById("print");
var myModal = new bootstrap.Modal(document.querySelector('.modal'), {})
if (array1.includes(input)) {
response.innerHTML = Text1;
myModal.toggle()
return function B() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-ba-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
}
}else if (array2.includes(input)){
response.innerHTML = Text2;
myModal.toggle()
return function B() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-ba-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
}
}
}
const Text1 = "In the Greeks, piloî are socks made from mattet animal hair or skin.";
const Text2 = "The Romans weared a sock- sandal combination made out of leather and fabric strips essentails. They were used to keep their feet warm during battles. The poor weared foot wraps. The wealthy were enable to got fittes socks.";
const array1 = ["1", "s"]
function checktxt() {
let text;
var input = document.getElementById("txt").value;
var response = document.getElementById("print");
var myModal = new bootstrap.Modal(document.querySelector('.modal'), {})
if (array1.includes(input)) {
response.innerHTML = input;
myModal.toggle()
return function B() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-ba-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
}
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal">
<div class="modal-dialog modal-content modal-header modal-body" id="print">
</div>
</div>
<input type="text" id="txt">
<button type="button" id="bu" class="btn-primary" onclick="checktxt()">Check Text</button>Hope it helps!