adjusting html code for make restriction search box-CodePudding

I have created searchbox which include questions and answers. questions is written and answer between bracktes. like Quesiton1 - ((Answer1))

user has to write the question and press enter to view the answers each user will have 10 attempts to view 10 questions and answers.

but my problem some users write the wrong question and when they press enter they got NO ANSWER and it count 1 of 10 attempts which is unfair

so what I need is to modify the code, where the users can search for the question. and click on the question to view the answer (and he has 10 attempts also) that means users can make sure the question is available before press enter or click to view the question

here is my code

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {

  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #0a2351;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>DrNapester - TestBank System</h2>

<input type="text" id="myInput" placeholder="Write the question here :)" title="Type in a name">
<ul id="myUL" style="display: none;">
  <li style="display: none;"><a href="Napester.html#">Question1 - (((Answer1)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question2 - (((Answer2)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question3 - (((Answer3)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question4 - (((Answer4)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question5 - (((Answer5)))</a></li>


<script>
// Number of guesses the user has made
var guesses = 0

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();

    myFunction()
  }
}); 


var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";

var searchBox = document.getElementById("myInput");

// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
    // UL.style.display = "block";
});

// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
    UL.style.display = "none";
});


function myFunction() {
    guesses  = 1
    if (guesses >= 10) {
        window.alert("You have finished your 10 attempts.");
        return
    }

    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    // if the input is empty hide the list
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        ul.style.display = "block";
    }

    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];

        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
     } else {
        li[i].style.display = "none";
    } 

    // This is when you want to find words that start the search string
    /*if (a.innerHTML.toUpperCase().startsWith(filter)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }*/
    }
}
</script>


</body></html>

CodePudding user response：

OK, so here's the answer to your problems, what was needed was to create a variable that would track the number of results. If it's above 0 then we add to the guesses. See the code below for reference

function myFunction() {
    // Remove the line below
    // guesses  = 1
    if (guesses >= 10) {
        window.alert("You have finished your 10 attempts.");
        return
    }

    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    // if the input is empty hide the list
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        // Place it here
        guesses  = 1;
        ul.style.display = "block";
    }

    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];

        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
     } else {
        li[i].style.display = "none";
    } 

    // This is when you want to find words that start the search string
    /*if (a.innerHTML.toUpperCase().startsWith(filter)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }*/
    }
}

// Number of guesses the user has made
var guesses = 0

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();

    myFunction()
  }
}); 

var attemptsDiv = document.getElementById("attempts");
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";

var searchBox = document.getElementById("myInput");

// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
    // UL.style.display = "block";
});

// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
    UL.style.display = "none";
});


function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    var trimmedFilter = filter.trim();
    // if the input is empty hide the list
    if(trimmedFilter.length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        ul.style.display = "block";
    }

    li = ul.getElementsByTagName("li");
    
    var resultCount = 0;
    
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];

        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
        resultCount  ;
     } else {
        li[i].style.display = "none";
    } 

    // This is when you want to find words that start the search string
    /*if (a.innerHTML.toUpperCase().startsWith(filter)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }*/
    }
    
    if (resultCount) {
        guesses  = 1;
        
        attemptsDiv.innerHTML = guesses;
        if (guesses >= 10) {
            window.alert("You have finished your 10 attempts.");
            return
        }
    }
}

* {

  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #0a2351;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>DrNapester - TestBank System</h2>

<input type="text" id="myInput" placeholder="Write the question here :)" title="Type in a name">
<ul id="myUL" style="display: none;">
  <li style="display: none;"><a href="Napester.html#">Question1 - (((Answer1)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question2 - (((Answer2)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question3 - (((Answer3)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question4 - (((Answer4)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question5 - (((Answer5)))</a></li>
</ul>
<div>Attempts: <span id="attempts">0</span></div>