'Search with id mechanism in javascript

I have a problem implementing search feature in my project. I have html like:

Html:

<input type="text" id="search">
<video src="smth.mp4" id="firstvid">
<video src="smth2.mp4" id="secondvid">
<video src="smth3.mp4" id="thirdvid">

The js I tried:

var inp = document.getElementById("search")
var inpval = inp.value;
var except = document.querySelector('video')
var vidid = except.getAttribute(id)
if(inpval !== vidid){
except.style.display="hide";
}else{
except.style.display="block";
}

I know it is dumb. All i want is that when user types id of a video in search bar, let's say firstvid, only firstvid should appear while all other videos should disappear. Is it possible with js? I searched a lot but could not find any example.

By appearing and disappearing, I meant that the search bar is on top of page and the videos are under it just like youtube. So when id of a video is searched all other videos should hide.

Thanks in advance :)

javascripthtml


Solution 1:[1]

I have solved the issue in the sense. When user types in the input field. If the input field value matches with the id of the video tag then it will set the display property of the video tag from none to block

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<input type="text" id="search" oninput="getTheValue()">
<video src="Proof.mp4" id="firstvid" style="display: none;"> </video>
<video src="Proof.mp4" id="secondvid" style="display: none;"></video>
<video src="Proof.mp4" id="thirdvid" style="display: none;"></video>
</body>
<script>

function getTheValue() {
    var inp = document.getElementById("search")  //getting input field

    if (inp.value == 'firstvid') {  // if it is equal to first id 
        document.getElementById('firstvid').style.display = "block";  
        //setting display to block
    }
    else if (inp.value == 'secondvid') {
        console.log("in second")
        document.getElementById('secondvid').style.display = "block";
    }
    else if (inp.value == 'thirdvid') {
        console.log("in third")
        document.getElementById('thirdvid').style.display = "block";
    }
    else {
        document.getElementById('firstvid').style.display = "none";
        document.getElementById('secondvid').style.display = "none";
        document.getElementById('thirdvid').style.display = "none";
    }
}
</script>

</html>

You can just copy paste and run to see. Attached screenshot

enter image description here

Like the above

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shamoon97

Related Questions