Javascript传递函数值以提交链接

Question

Class filterStyle是一个导航，它将所选值发送到headTypeFunction Head Type函数。函数headTypeFunction更改链接的背景颜色，但我试图将所选值传递给Submit函数并将值附加到创建get搜索的链接的结尾。

<script>
function headTypeFunction(HeadType){
document.getElementById('Pan').style.backgroundColor = "white";
document.getElementById('Hex').style.backgroundColor = "white";
document.getElementById('Hex Washer').style.backgroundColor = "white";
document.getElementById(HeadType).style.backgroundColor = "#e3e3e3";
}

function Submit() {
headTypeFunction(HeadType)
document.getElementById('yourLink').href +=  HeadType;
}
</script>

<div class="filterStyle">
 <ul>
 <a  href="javascript:void(0);" id="Round" onclick="headTypeFunction('Round')"><li><img src="img/iconImgs/roundHeadType.svg"/ width="61pt;"><br>Round</li></a>
 <a  href="javascript:void(0);" id="Button" onclick="headTypeFunction('Button')"><li><img src="img/iconImgs/buttonHeadType.svg"/ width="61pt;"><br>Button</li></a>
 <a  href="javascript:void(0);" id="Flat" onclick="headTypeFunction('Flat')"><li><img src="img/iconImgs/flatHeadStyle.svg"/ width="61pt;"><br>Flat</li></a>
 <a  href="javascript:void(0);" id="Oval" onclick="headTypeFunction('Oval')"><li><img src="img/iconImgs/ovalHeadType.svg"/ width="61pt;"><br>Oval</li></a>
 <a  href="javascript:void(0);" id="Truss" onclick="headTypeFunction('Truss')"><li><img src="img/iconImgs/trussHeadType.svg"/ width="61pt;"><br>Truss</li></a>
 <a  href="javascript:void(0);" id="Pan" onclick="headTypeFunction('Pan')"><li><img src="img/iconImgs/panHeadType.svg"/ width="61pt;"><br>Pan</li></a>
 <a  href="javascript:void(0);" id="Hex" onclick="headTypeFunction('Hex')"><li><img src="img/iconImgs/hexHeadType.svg"/ width="61pt;"><br>Hex</li></a>
 <a  href="javascript:void(0);" id="Hex Washer" onclick="headTypeFunction('Hex Washer')"> <li><img src="img/iconImgs/hexWasherHeadType.svg"/ width="61pt;"><br>Hex Washer</li></a>
 </ul>
 </div></td>
 </tr>
 <tr>
 <td>