javaScript - Load image when click button,

Status
Not open for further replies.
B

Berk

berkibap#4233
Developer
Oct 17, 2015
863
190
yo.
so what i need is when i click the <a class="btn btn-primary btn-large" id="button">Load Image</a>, it should load the image which is inputted to <input id="text"> to <div id="#area"></div>. Hoping this makes sense.
What I've tried?
HTML: 
<input type="text" id="img" class="form-control" placeholder="Yemeğinizin linki.">
<a class="btn btn-primary btn-large"  id="button"name="button">Resmi Önizle</a>
<div id="area">
</div>
<script>
    $("button").click(function () {
    var imgUrl = $("img").val();
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
</script>
Couldn't get it working. Hor can i do that?
 
Sort by date Sort by votes
griimnak

griimnak

You're a slave to the money then you die
Jul 20, 2013
955
794
Normally i'd use
You must be registered for see links
for something like this. here's a jsfiddle:
You must be registered for see links


HTML: 
<button class="button">Load image</button>

<!-- style="display:none;" hides the image untill toggled -->


<div style="display:none;" class="image_container">
  <img src="https://images-cdn.9gag.com/photo/aX9o08v_700b.jpg"/>
</div>

JavaScript: 
$(".button").click(function(){
    $(".image_container").fadeIn();
});

(Don't forget, in order for this code to work you need to call jquery in your <head>)
Code: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
Upvote 0 Downvote
B

Berk

berkibap#4233
Developer
Oct 17, 2015
863
190
griimnak said:
Normally i'd use
You must be registered for see links
for something like this. here's a jsfiddle:
You must be registered for see links


HTML: 
<button class="button">Load image</button>

<!-- style="display:none;" hides the image untill toggled -->


<div style="display:none;" class="image_container">
  <img src="https://images-cdn.9gag.com/photo/aX9o08v_700b.jpg"/>
</div>

JavaScript: 
$(".button").click(function(){
    $(".image_container").fadeIn();
});

(Don't forget, in order for this code to work you need to call jquery in your <head>)
Code: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Click to expand...
This one i posted is you enter a link to input and it loads it in the end of body (couldn't figure it how to make it in a div, lol)
The one you do is loads a certain image tho :s
 
Upvote 0 Downvote
MayoMayn

MayoMayn

BestDev
Oct 18, 2016
1,423
683
Berk said:
yo.
so what i need is when i click the <a class="btn btn-primary btn-large" id="button">Load Image</a>, it should load the image which is inputted to <input id="text"> to <div id="#area"></div>. Hoping this makes sense.
What I've tried?
HTML: 
<input type="text" id="img" class="form-control" placeholder="Yemeğinizin linki.">
<a class="btn btn-primary btn-large"  id="button"name="button">Resmi Önizle</a>
<div id="area">
</div>
<script>
    $("button").click(function () {
    var imgUrl = $("img").val();
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
</script>
Couldn't get it working. Hor can i do that?
Click to expand...
HTML: 
<script type="text/javascript">
function _ (e {
  return document.querySelector(e);
}

_('#button').addEventListener('click', function(e) {
  var imgUrl = _('#img').value;
  _('#area').innerHTML = '<img src="' + imgUrl + '" alt="description" />';
  e.preventDefault();
});
</script>
If this doesn't work, you're definitely doing something wrong
 
Upvote 0 Downvote
B

Berk

berkibap#4233
Developer
Oct 17, 2015
863
190
Berk said:
This one i posted is you enter a link to input and it loads it in the end of body (couldn't figure it how to make it in a div, lol)
The one you do is loads a certain image tho :s
Click to expand...
Oh shit. I thought this is the release thread lmao.
Sentinel said:
HTML: 
<script type="text/javascript">
function _ (e {
  return document.querySelector(e);
}

_('#button').addEventListener('click', function(e) {
  var imgUrl = _('#img').value
  _('#area').innerHTML = '<img src="' + imgUrl + '" alt="description" />'
  e.preventDefault()
})
</script>
If this doesn't work, you're definitely doing something wrong
Click to expand...
thanks boo
 
Upvote 0 Downvote
MayoMayn

MayoMayn

BestDev
Oct 18, 2016
1,423
683
Berk said:
Oh shit. I thought this is the release thread lmao.

thanks boo
Click to expand...
Or the jQuery version:

HTML: 
$(document).on('click', '#button', function (e) {
     var imgUrl = $('#img').val();
     $('#area').html('<img src="' + imgUrl +  '" alt="description" />');
     e.preventDefault();
});
 
Upvote 0 Downvote
Markshall

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
Sentinel said:
HTML: 
<script type="text/javascript">
function _ (e {
  return document.querySelector(e);
}

_('#button').addEventListener('click', function(e) {
  var imgUrl = _('#img').value;
  _('#area').innerHTML = '<img src="' + imgUrl + '" alt="description" />';
  e.preventDefault();
});
</script>
If this doesn't work, you're definitely doing something wrong
Click to expand...
You're missing a closing bracket after function _(e so it won't work

At what point is your input#img element being assigned a value for it to be put into the div#area element, or does the user define it?

Also, your click won't work because you're calling it on the click of a button element, not the element with an ID of button. What you want is something similar to this:

jQuery approach:
Code: 
<input type="text" id="img" class="form-control" placeholder="Yemeğinizin linki.">
<a class="btn btn-primary btn-large"  id="button" name="button">Resmi Önizle</a>
<div id="area"></div>

<script>
    $(function() {
        $("#button").click(function () {
            var imgUrl = $("#img").val();
            $("#area").html("<img src='" + imgUrl + "' alt='description' />");
        });
    });
</script>

@Sentinel's underscore/half-jQuery approach:
Code: 
<input type="text" id="img" class="form-control" placeholder="Yemeğinizin linki.">
<a class="btn btn-primary btn-large"  id="button" name="button">Resmi Önizle</a>
<div id="area"></div>

<script type="text/javascript">
    function _(e) {
        return document.querySelector(e);
    }

    _('#button').addEventListener('click', function(e) {
        var imgUrl = _('#img').value;
        _('#area').innerHTML = '<img src="' + imgUrl + '" alt="description" />';
        e.preventDefault();
    });
</script>

Vanilla JavaScript approach:
Code: 
<input type="text" id="img" class="form-control" placeholder="Yemeğinizin linki.">
<a class="btn btn-primary btn-large"  id="button" name="button">Resmi Önizle</a>
<div id="area"></div>

<script type="text/javascript">
document.getElementById('button').onclick = function(e) {
    var imgVal = document.getElementById('img').value;
    document.getElementById('area').innerHTML = '<img src="' + imgVal + '" alt="description" />';
    
    e.preventDefault();
}
</script>
 
Upvote 0 Downvote
Status
Not open for further replies.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top