Question 55694 in Html Question posted in
Some basic documentation can be found here.

new to html, is there a way to make a search box that opens google, or something like it?

this isn’t really for what the title says, but it’s a good example of what i would like
i would like to have a text box with text you can enter, i then want that to go in a url that you could click on, or an embed

i tried this to embed an image that can change depending on user input

<body>
    <input id="testBox1" type="text" >
    <button onclick=DisplayText()">Display Text</button>
    <p>
    <img src=http://verumignis.com/bitmapgen/<div id="displayText"></div>)alt="Circle Image">
    </p>

    <script>
    function DisplayText() { 
document.getElementById("displayText").innerText = document.getElementById("testBox1").value
    }
</script>
Tags:

2

Answers


  1. 0

    I’ve done it using a tag. All I did was to change the href of the tag to "https://www.google.com/search?q=&quot; and after that the text of the input.
    Also, be careful with the typos and the " in your code. It sometimes might cause you some errors.

     function DisplayText(element) {
    let a = document.getElementById("my-link");
    let input = document.getElementById("my-input");
    a.href = "https://www.google.com/search?q=" + input.value; 
}
    <input id="my-input" type="text">
<button onclick="DisplayText()">See link</button>
<p>
    <div id="displayText"></div>
    <a id="my-link" href="#">Click me!</a>
</p>
    Login or Signup to reply.
  2. 0

    I made this sample for you. You can make it as your reference.

    function DisplayText() { 
   let input = document.getElementById("testBox1");
   let image = document.getElementById("img");
   image.src = 'https://verumignis.com/' + input.value + '.png';
}
    #img{
   width: 100px;
   height: 100px;
}
    <input id="testBox1" type="text" >
<button onclick="DisplayText()">Display Text</button>
<br><i>Type <b>"logo"</b> in the textfield.</i>
<p>
   <!-- <img src=http://verumignis.com/bitmapgen/<div id="displayText"></div>)alt="Circle Image"> -->
   <img src="https://static.thenounproject.com/png/1372075-200.png" id="img" alt="Circle Image">
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search