Sending parameter from one function to another - javascript

I am trying to send value from one function to another. But it says undefined when I try to show them in console.
Here I am trying to show large-image2 id while someone click on Big()function. With same image that was in large-image id. Which one occur while someone clicked on lgBox() function.
Anyone please help
function lgBox(url){
var u = url;
big(u);
document.getElementById("large-image").innerHTML="<img src='" + u + "' />";
}
Here is my another function. I am sending data here from above function.
function big(u) {
var ul=u;
alert(ul);
document.getElementById("large-image2").innerHTML="<img src='" + ul + "' />";}
Here big function says undefined while I am trying to show value of ul.
Thanks in advance.
Here is my HTML code.
<div id="large-image" onclick="big()">
</div>
<div id="large-image2" onclick="lgBoxcross()">
</div>
<div id="thumb-image" >
<button onclick="lgBox('../images/<?php echo $singleProductImage['name']; ?>')">
<img src="../images/<?php echo $singleProductImage['name']; ?>" alt="" class="img">
</button>
</div>
I am not giving my php code here.

Click on the button, and it works perfectly fine. But if you click on large-image, it would show undefined as you haven't passed anything in big():
function lgBox(url) {
document.getElementById("large-image").innerHTML = '<img src="' + url + '"/>';
}
function big(elem) {
var myimg = elem.getElementsByTagName('img')[0];
var mysrc = myimg.src;
document.getElementById("large-image2").innerHTML = '<img src="' + mysrc + '"/>';
}
<div id="large-image" onclick="big(this)">
</div>
<div id="large-image2">
</div>
<div id="thumb-image">
<button onclick="lgBox('http://via.placeholder.com/350x150')">
button
</button>
</div>

A simple way to share a value between functions is to place functions and variables in an event handler. After reading the update, it has become more confusing...I don't see lgBoxcross(). Instead of making all of these one off functions, make one function.
In this demo:
There's only one callback function for all clicks.
It is bound to a button and when the button is clicked, it will extract the src value of the img (the url of img) that resides within this button.
It then calls another function lgBox() and passes the url through it.
lgBox() takes this url and creates an image in each div.
Each div has on on event handler when clicked will trigger the main thumbnail button and the same results occur (both divs get the img).
Demo
var btn = document.getElementById('btn');
btn.onclick = function() {
var url = this.querySelector('.img').src;
lgBox.call(this, url);
};
function lgBox(u) {
var img = "<img src='" + u + "' width='200'style='object-fit:contain'>";
document.getElementById("large-image1").innerHTML = img;
document.getElementById("large-image2").innerHTML = img;
}
.frame {
width: 30vw;
height: 30vh;
border: 1px solid red;
display: inline-block;
}
<div id="large-image1" class='frame' onclick="btn.click()">
</div>
<div id="large-image2" class='frame' onclick="btn.click()">
</div>
<div id="thumb-image">
<button id='btn'>
<img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width='50' class="img">
</button>
</div>

Related

Appended text with keyup event disappears after button click jQuery

Using jQuery, I' m downloading an image into SVG format.
Now, I wanted to show a title just above image. I tried to achieve this with keyup event. When I write the title, my script appends it into the div as it suppose to be but as soon as I click on download button, the title disappears and the image downloads without the appended title.
I wanted to download the image with title above that's actually an appended text.
html
<div class="row">
<div class="col-sm-6">
<label>Write Title</label>
<input type="text" name="qr_frame_text" id="qr_frame_text">
</div>
<div class="col-sm-6">
<div id="qr-container">
<div id="get_frame_text"></div> //Here I'm appending the title
<div id="img" class="qr-img">
<img src="data:image/png;base64, {!! base64_encode($image) !!}" class="img-fluid" />
</div>
</div>
</div>
JavaScript
$("#qr_frame_text").keyup(function () {
$("#get_frame_text").html(this.value);
});
$( document ).ready(function() {
domtoimage.toSvg(node)
.then(function (dataUrl) {
var node = document.getElementById("qr-container");
$('#qr2').click(function() {
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
var link = document.createElement('a');
link.download = 'qrcode.svg';
link.href = dataUrl;
link.click();
});
});
});
You are calling domtoimage.toSvg(node) after you have done the following:
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
Remember, var node = document.getElementById("qr-container"); is not saving a snapshot of the node. It will change if it is modified.
You are changing the element to no longer contain the input before saving it. If you are trying to reset the changes, do that in your .then().

Pass JS Function Parameter into <img> Tag

I have a JS function like so:
function onClick(images) {
document.getElementById('imageTest').innerHTML = image syntax here
};
I'm trying to pass the images parameter into the tag, like so:
"<img src='\data\images\" + images + "' alt='test image'";
but I can't get my quotes to line up correctly. What is the correct way to accomplish this?
update:
here is the html:
<body>
<div id='map'></div>
<div id='footer'>
<div><img src="\data\images\otherImage.png" class="footer-img">
<h1>Average Rent in Every US County</h1>
</div>
<p id='imageTest'>testing old</p>
</div>
</body>
This was the eventual solution:
x.innerHTML = '<img src="data/images/' + images + '"/>';

jquery edit post with image missing something

I am trying to make a post edit using jquery. But i have a problem with image think.
I have created this DEMO from codepen.io .
In this demo you can see there are two edit button. If you click the edit1 then the image delete (x) button will be come on the right top bar but that will come just one time. It need to be come two delete button because there are two image. What is the problem on there and how can i fix that problems. Anyone can help me in this regard ?
JS
$(document).ready(function() {
$("body").on("click", ".editBtn", function(event) {
event.target.disabled = true;
var ID = $(this).attr("id");
var selected = $("#messageB" + ID + " .postInfo img").parent().html();
var currentMessage = $("#messageB" + ID + " .ptx").html();
var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
$("#messageB" + ID + " .postInfo").html(editMarkUp);
var data = $('#txtmessage_' + ID).val();
$('#txtmessage_' + ID).focus();
$('#txtmessage_' + ID).val(data + ' ');
});
$("body").on("click", ".cNeD", function(event) {
$(".editBtn").prop('disabled', false);
var ID = $(this).attr("id");
var currentMessageText = $("#txtmessage_" + ID).html();
$("#messageB" + ID + " .ptx").html(currentMessageText);
});
});
HTML
<div class="container">
<div class="postAr" id="messageB1">
<div class="postInfo">
<img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1">
<img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1">
</div>
<div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
<div class="editBtn" name="edit" id="1">Edit1</div>
</div>
</div>
<div class="container">
<div class="postAr" id="messageB2">
<div class="postInfo">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg
</div>
<div class="editBtn" name="edit" id="2">Edit2</div>
</div>
</div>
I found that there are 2 main issues there.
you use html() function which get the HTML contents of the first element in the set of matched elements. take a look document
-> you will get html instead of src of img. But later when you try to set src attribute during creating an 'edit area' so that is the mainly reason why image doesn't
display (.attr() function is better to get src attribute)
same wrong logic with message ( .text() function could be the better
solution in this case)
don't forget to check if you have create an edit area or not. At the moment every time it will create a new "edit area". Duplicate !
Hope it will help you a bit.

How to put a button active by default?

thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.

javascript image rollover inside div

i have a single div 100px X 300px. What's the easiest way in JavaScript so when I hover over the div i show an image and then when i leave the div the image disappears.
for starters i thought the following would get me started but i can't seem to remove the image properly
<script type="text/javascript">
function MouseOver_Event(elementId) {
var imgToCreate = document.createElement('img');
imgToCreate.setAttribute('id', 'imgHandle');
imgToCreate.setAttribute('src', elementId + '.png');
imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
var targetDiv = document.getElementById(elementId);
targetDiv.appendChild(imgToCreate);
targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
}
function MouseOut_Event(elementId) {
var imgToRemove = document.getElementById('imgHandle');
var targetDiv = imgToRemove.parentNode();
if (imgToRemove != null)
targetDiv.removeChild(imgToRemove);
targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
}
</script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>
You're attaching your MouseOut_Event to onmouseover instead of onmouseout. But you probably don't need to be messing with dynamic event creation anyway; just add onmouseout="MouseOut_Event(this.id)" to the three divs and that should do it.
Why don't you use CSS instead ?
For example:
#div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}

Categories

Resources