3
\$\begingroup\$

This searches within three search engines. I would like if you could tell me any ways to make this better:

function google() {
  var good = document.getElementById("theStuff").value;
  window.location.href = 'http://www.google.com/search?q=' + good;
}
function yahoo() {
  var good = document.getElementById("theStuff").value;
  window.location.href = 'http://search.yahoo.com/search?p=' + good;
}
function bing() {
  var good = document.getElementById("theStuff").value;
  window.location.href = 'http://www.bing.com/search?q=' + good;
}
.myButton {
	-moz-box-shadow:inset 0px 50px 19px 50px #ffffff;
	-webkit-box-shadow:inset 0px 50px 19px 50px #ffffff;
	box-shadow:inset 0px 50px 19px 50px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:3px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:13px 45px;
	text-decoration:none;
	text-shadow:0px -6px 0px #ffffff;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myButton {
	-moz-box-shadow:inset 0px 50px 19px 50px #ffffff;
	-webkit-box-shadow:inset 0px 50px 19px 50px #ffffff;
	box-shadow:inset 0px 50px 19px 50px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:3px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:13px 45px;
	text-decoration:none;
	text-shadow:0px -6px 0px #ffffff;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.myButton:active {
	position:relative;
	top:1px;
}
<textarea rows="3" cols="50" id="theStuff"></textarea><br>
<a onclick="google()" target="blank" class="myButton">google</a><br>
<a onclick="yahoo()" class="myButton">yahoo</a><br>
<a onclick="bing()" class="myButton">bing</a><br>

\$\endgroup\$
0
2
\$\begingroup\$

Consider exporting the following line into a function:

var good = document.getElementById("theStuff");

This way, if you ever change the way the input is received, you'll only have to change it one place instead of three.

In terms of conventions:

  • In HTML we don't use camel case, but instead we use dashes. So, theStuff should really be the-stuff, but that name doesn't really mean anything. Consider naming it search-bar or something.
  • In your CSS, add a space before the value. background:black should look like background: black (space between : and black).
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.