designate an errorpage.html for a JS document.getElementById('link_id').value + '.html'; if value not found in directory?

Question

Here is a function for a popup search function, which, when a word is typed, and enter is pressed (the handleKeyPress(e) function, it automatically goes to say, dogs.html (its a kids language learning app). However say they type 'dogg' and not 'dog', Iw ould like it to go to a designated error page. I cannot code at all and have only manipulated other people's scripts. for example, the directory would have a list of animals.html, i.e. dog.html, cat.html, etc. but if a word is typed that is not in this directory

(there should be a search function to see if *.html is there or not, then go to error page if its not there. But I can't do this. I have no training. Can anyone help me with this? I hope I don't get thrown off this forum again, you really shouldn't be so harsh on idiots...!) i.e. what I need is : if .value+'.html' not in dir; goto errorpage.html

Here's "my" code to load whatever word's page that's typed in:

function goTo()
{
    location.href = document.getElementById('link_id').value + '.html';
    /*window.location.replace("spellcheck.html");*/
}  

function handleKeyPress(e){
     var key=e.keyCode || e.which;
           if (key==13){
           goTo(); 
        /*window.location.replace("spellcheck.html");   */
     }
}

Answer 1

You would probably have to use an XmlHttpRequest to check if the file exists in the location specified or not and redirect to the error page if the file doesn't exist. But this raises it's own set of problems.

Or, you could create a service on the server that could tell you the same. Either way it's not super easy.

Answer 2

As mentioned earlier, you can create an array that can hold all of the values for the pages you know to exist in your site.

(there's a decent amount of commented text in the code snippet for further details)

JavaScript arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

JavaScript .indexOf() (in relation to arrays): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

A JavaScript array is a series of data that is common separated inside of square brackets. Each element is automatically assigned an index value so that developers can quickly reference specific pieces. However, it's important to know that arrays start their index number at 0...

So, in this example:

const arrayName = ['element1', 'element2', 'page3', 'dog']

• 'element1' is at index 0 inside arrayName
• 'element2' is at index 1 inside arrayName
• 'page3' is at index 2 inside arrayName
• 'dog' is at index 3 inside arrayName

You can use JavaScript array's .indexOf() to find these array index values. If an element does not exist within an array then .indexOf() will return -1 (negative one).

arrayName.indexOf( 'dog' ) === 3

// get the input element that's getting the text
const linkID  = document.getElementById('link_id');
// get the search button
const linkBtn = document.getElementById('link_btn');

// listen for when the keyup event (so when the user is
// typing, this will trigger when a key is released)
linkID.addEventListener('keyup', (e)=>{
  // get the keyCode to test for [ENTER]/13
  let key    = e.keyCode || e.which;
  // get the textBox element
  let target = e.target  || e.srcElement;
  // test if the [ENTER] key was hit
  if( key === 13 ){
    // if [ENTER] test the value 
    processPage( target.value );
  }
});

// Listen to the click event on the search button to 
// kick off the process workflow...
linkBtn.addEventListener('click', ()=>{
  processPage( linkID.value );
});

// Broke this out so that the processing of the text
// field can be done by [ENTER] or by clicking a 
// search button
function processPage( val ){
  // checkPage will return true/false if the text matches
  // a page in the array list
  if( checkPage( val ) ){
    // if the page does exist, then kick off the redirect
    goTo( val );
  }else{
    // display an error message
    alert( 'Sorry, the page you are looking for does not exist' );
    // reset the value of #link_id 
    linkID.value = '';
  }
}

// This function checks if the text value submitted matches
// one of the static pages saved to the array
function checkPage( val ){
  // pages[] is an array that holds all the pages you know
  // to exist
  const pages  = ['dog', 'cat', 'bunny'];
  
  // .indexOf() will return the array position of a search
  // query (in this case the value of val)
  // Arrays start at 0 so if the user searches "dog" the
  // .indexOf() will provide the answer 0.
  // If an element does not exist, .indexOf() returns -1
  // By assigning this as a condition: 
  //    "is the index of val from the array pages[] greater
  //     than or equal to 0?"
  // we create a condition that will return true/false
  return ( pages.indexOf( val ) >= 0 );
}

function goTo( val ){
  console.log( val + '.html' );
  // location.href = val + '.html';
}

<input type="text" id="link_id" /><button id="link_btn">search</button>