2013-08-10 5 views
3

Я попытался подключить первое текстовое поле, чтобы оно превратилось в URL-адрес, а затем, когда щелкнут «поиск», он перейдет на этот веб-сайт, не уверен, что это невозможно, или я просто невежественный, но по-настоящему оцените некоторую помощь, спасибо заранее!Простой ящик поиска JavaScript

<html> 
    <head> 
    </head> 
    <body> 
    <script type="text/javascript"> 

    function link() { 
     var link_s = document.getElementById('link_id').value; 
     document.getElementById('link_str').innerHTML = link_s.link() 
    } 

    </script> 

<h2> Search box </h2> 
    <input type='text' id='link_id'> 
     <input type='button' id='link_str' value='Search' onClick='link()'> 
    </body> 
    <html> 
+2

Использование того же идентификатора для имени функции и имени переменной может быть не очень хорошей идеей. –

+0

Вы должны сделать немного больше исследований/домашних заданий. –

+1

Ну, что такое 'str' и где оно определено? Вы либо оставили это из своего фрагмента, либо пытаетесь использовать необъявленную переменную. –

ответ

2

Попробуйте JavaScript:

function goTo() 
{ 
    location.href = document.getElementById('link_id').value; 
} 

и изменить onclick в HTML:

<input type='text' id='link_id'> 
<input type='button' id='link' value='Search' onClick='javascript:goTo()'> 

Edit:

Если вы хотите следовать ненавязчиво JavaScript, вы бы переместить onclick полностью в код JavaScript, и удалить его в HTML:

document.getElementById('link').onclick = function() 
{ 
    location.href = document.getElementById('link_id').value; 
}; 
+0

Это действительно хорошо, я еще раз посмотрю на него, спасибо! – Samir

+0

Событие «onclick» не требует «javascript:» внутри. Также не забудьте добавить «return false», чтобы избежать отправки формы. '' или, еще лучше, в теге FORM HTML, добавьте событие onsubmit с возвратом false '

'. –

+0

@ AlejandroIván Много раз, если вы пытаетесь получить доступ к другим переменным JavaScript, которые вы хотите, чтобы ваша функция выполнялась в глобальном контексте. Кроме того, его кнопка не 'type =" submit "и не находится внутри тегов' form', поэтому она ничего не представит. –

1

Вот как я бы это сделать:

<input type="text" id="link-box"/> 
<input type="button" id="search-button" value="Search" 
     onclick="window.location = document.getElementById('link-box').value;"/> 

Конечно, вы можете сделать это:.

<script type="text/javascript"> 
     function func(){ 
      window.location = document.getElementById('link-box').value; 
     } 
</script> 

onclick="func();" 

Или document.getElementById ("поиск-кнопка") OnClick = function() { window.location = document.getElementById ('link-box'). value;
};

Или в последнюю очередь

<script type="text/javascript"> 
     document.getElementById("search-button").addEventListener("click", function(){ 
      window.location = document.getElementById('link-box').value; 
     }); 
</script> 
+0

Спасибо! И благодаря всем комментариям, я знаю, что я сделал неправильно сейчас! – Samir

0

, если вы хотите, чтобы создать форму, которая будет искать в Google используйте это:

<script type="text/javascript"> 
function dos12(g1) { 
window.open('https://www.google.com/#q='+g1 +" site:linkedin.com",  'G1window'); 
} 

     </script> 
    <form onsubmit="dos12(this.g1.value); return false;"> 
    <input type="text" name="g1" size="20" placeholder="Name" /> 
      <input type="submit" value="Submit" /> 
    Search Linkedin via Google<br /> 
    <br /> 
    </form> 

Если вы хотите найти сайт, то вам нужно будет использовать строку поиска. например, если вы хотите найти сайт поиска ABN для Австралии, вы должны использовать следующий код.

<script type="text/javascript"> 
function dos10(a1) { 
window.open('http://abr.business.gov.au/SearchByName.aspx?SearchText=' + a1, 'a1window'); 
} 

     </script> 
    <form onsubmit="dos10(this.a1.value); return false;"> 
    <input type="text" name="a1" size="20" placeholder="Name" /> 
      <input type="submit" value="Submit" /> 
    ABN Lookup name<br /> 
    <br /> 
    </form> 

надеюсь, что это поможет. вам не нужно ничего добавлять. Просто скопируйте и вставьте это в блокнот или в свой редактор кода и сохраните как test.html, затем откройте его, чтобы проверить его.

Смежные вопросы