Image disappears if url is deleted

Cal Corbin

Below is my jQuery for a meme generator I'm learning to build. Basically whenever a user enters a URL and deletes it, the original default image disappears and I'm struggling with how to get the image to return to its default state if the user removes their input.

var main = function() {

  $('#top-text').keyup(function() {
    var top = $(this).val();
    $('.top-caption').text(top);
});
  $('#bottom-text').keyup(function() {
    var bottom = $(this).val();
    $('.bottom-caption').text(bottom)
});
  $('#image-url').keyup(function() {
    var image = $(this).val();
    $('div.meme > img').attr('src',image);
 });
};

$(document).ready(main);

This specific code here is where I can't figure out how to get the default image to reload if a user deletes their URL.

$('#image-url').keyup(function() {
    var image = $(this).val();
    $('div.meme > img').attr('src',image);

Here is the corresponding HTML

<div class="header">
  <div class="container">
    <img src="pikachulollipop.gif">
    <h1>Cal's Meme Generator</h1>
  </div>
</div>
<div class="main">
  <div class="container">
    <div class="row">
      <div class="col-md-6">

        <div class="meme thumbnail">
          <img src="pancham.png">
          <h1 class="top-caption">U say something?</h1>
          <h1 class="bottom-caption">Deal with it</h1>
        </div>

      </div>
      <div class="col-md-6">

        <div class="tool">
          <h2>Create a meme</h2>
          <form role="form">
            <div class="form-group">
              <label>Image URL</label>
              <input id="image-url" type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Top text</label>
              <input id="top-text" type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Bottom text</label>
              <input id="bottom-text" type="text" class="form-control">
            </div>
          </form>
        </div>
Jamiec

Your image starts with a default of pancham.png - I assume you want that reset:

$('#image-url').keyup(function() {
    var image = $(this).val() || "pancham.png";
    $('div.meme > img').attr('src',image);
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related