Переменные JavaScript, используемые внутри html

-1

Я должен сделать макет веб-сайта для школьного задания. Веб-сайт включает функцию поиска. Для назначения функция поиска не должна быть полностью функциональной; Поэтому для макета я хочу иметь iframe, который изменит значение src = "" после нажатия кнопки. Сначала iframe будет отображать изображение, а затем после того, как клиент/пользователь что-то введет (любая строка, входная информация не имеет значения) и попадает в «поиск», я хочу, чтобы src для iframe изменился. Мне было интересно, есть ли способ сделать это с помощью javascript. Я довольно новичок и мало знаю о javascript. В iframe, который мне нужно изменить, есть и id search_frame. Это мой код:Переменные JavaScript, используемые внутри html

<head> 
<title>Home</title> 
<link rel="stylesheet" type="text/css" href="HOME.CSS"/> 
</head> 

<body> 
    <div id="main"> 
     <div id="top" > 
     <a href="" id="LOGO"> 
     <img alt="LOGO" height="37" src="LOGO.JPG" width="342" /> 
     </a> 
     <img id="Cheetah_Logo" alt="cheetah_logo" height="29" src="Cheetah_Corner.PNG" width="205" /><a id="CHEETAH_LINK"> 
     </a> 
    </div> 

     <div id="center"> 
     <div id="Left_Section"> 
      <div id="checkBox"> 
       <form> 
        <input type="radio"/>Text-Books 
        <input type="radio"/>eBooks 
        <input type="radio"/>Class-Notes 
        <input type="radio"/>Exams 
        <input type="radio"/>Tutors 
        <input type="radio"/>Software 
        <input type="radio"/>Homework 
        <input type="radio"/>Free-Stuff 
        <input type="radio"/>Events 
        <input type="radio"/>Other 
        <a id="Advanced" href="http://Home.html">Advanced Search</a> 
       </form> 
       <div id="search_Div"> 
        <form id="Search"> 
         <input id="search_Bar" type="text" /> 
         <button>Search</button> 
        </form> 
       </div> 
      </div> 
      <div id="search_results"> 
       <iframe id="search_frame" scrolling="yes" src="image.png"> 
        Your system does not support frames 
       </iframe> 
      </div> 
      <div id="links"> 
      <a href="Product.html" id="link_product"> 

      </a> 
      <a href="profile_2.html" id="link_profile"> 
       <img id="profile_button" alt="profile_button" src="profile_button.jpg" /> 
      </a> 
      <a id="click_here" href="profile_2.html"> 
       Click here to view your profile! 
      </a> 
      </div> 
     </div> 

    <div id="bottom"> 
     <center> 
     <img src="bottom_bar.JPG" alt="bottom_bar" /> 
     </center> 
    </div> 

</div> 
<div> 
    <img src="Left_Filler.JPG" alt="Left_Filler" id="Left_Filler"/> 
    <img src="Right_Filler.JPG" alt="Right_Filler" id="Right_Filler"/> 
</div> 

</div> 
</body> 
</html>

Это идея общая идея типа сценария я хочу запустить:

Это позволит установить IFRAME к изображению:

<script type="text/javascript"> 
    function rowdy(num){ 
    variable1='Rowdy.jpeg'; 
    return variable1; 
    } 
</script>

Это мой mocksearch после нажатия кнопки:

<script type="text/javascript"> 
function mockSearch(var1) 
    { 
     var1='Results_Mock_CSS.css'; 
     return var1;  
    } 
</script>

Я знаю, что это неверно, но я думал, что может быть способ чтобы вызвать вызовы функций внутри src для iframe, любая помощь, руководство или идеи будут очень благодарны, спасибо в продвинутом!

источник

2013-12-06 EVAC

Вам просто нужно иметь событие щелчка на кнопке, как,

<input type="button" value="Search" onclick="SearchClicked();"/>

И что щелчок может изменить источник, как показано ниже.

<script type="text/javascript"> 
    function SearchClicked() { 
     document.getElementById('search_frame').src = 'Rowdy.jpg'; 
    } 
</script>

источник

2013-12-06 04:26:25

Во-первых, убейте элемент «форма», поскольку это в основном указывает на возвращение обратно на сервер, который вам не нужен (sortof, вы можете захотеть его позже, но оставьте это, пока не поймете это). Затем установите обработчик onclick для кнопки, которая находит iframe и обновляет атрибут src.

Что-то вроде

 <div id="search_Div"> 
     <input id="search_Bar" type="text" /> 
     <button onclick="document.getElementById('search_frame').src='Rowdy.jpeg';"> 
      Search</button> 
     </div>

будет делать это.

источник

2013-12-06 04:19:39 DrC

Как сказано в предыдущем ответе, вы можете использовать свойство onClick. Вы также можете использовать магию jQuery (которая будет менее эффективной, но для школьного проекта разница незначительна).

Во-первых, в голове, вы должны импортировать JQuery с утверждением

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

, а затем, можно поставить сразу после

<script> 
    $(document).ready(function() { 
     $('button').click(function() { 
      $('#search_frame').attr('src', 'Rowdy.jpg'); 
     } 
    } 
</script>

связать метод щелчку событие на кнопке.

источник

2013-12-06 04:25:16 piticent123

Переменные JavaScript, используемые внутри html

ответ

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