Javascript: onmouseover function for description box on website

Question

I'm a complete amateur when it comes to Computer Science (potentially looking at studying at uni) but decided a few days ago to build a website to post science articles, aimed at students to grow their interest in science. The idea is that when you are on the catalogue page of all the articles I have written, you can hover over the title to read a description of what it's about. Whilst this descripton box idea isn't absolutely necessary, it is frustrating as I had it working yesterday with only one box, but now I have added another and attempted to properly name the writing it has broken! I know the code is rough, but if you could put aside any disparaging comments that would be great!

HTML

<p><a onmouseover="showbox('description')" onmouseout="hidebox('description')" 
href="Telomeres.html"> Title 1 </a></p>
<div id="description"><p>Description of title 1</p></div>


<p><a onmouseover="showbox('description2')" onmouseout="hidebox('description2')" 
href="index.html"> Title 2 </a></p>
<div id="description2"><p>Description of title 2</p></div>  

Javascript

    function showbox('description'){
document.getElementById('description').style.display = 'block';
}
function hidebox('description')
{
document.getElementById('description').style.display = 'none';
}




     function showbox('description2'){
document.getElementById('description2').style.display = 'block';
}
function hidebox('description2')
{
document.getElementById('description2').style.display = 'none';
}

Answer 1

You only need one function for showing the box since you are passing the id into it. The thing in the parenthesis of the function is the name of the argument that is being passed in. Inside that function you can use that variable. So in your case, you would do this:

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
}

function hidebox(nodeId)
{
    document.getElementById(nodeId).style.display = 'none';
}

For more info on javascript functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions