I can not terminate a function in JS - javascript

I have two js functions for the one same input (type="file"). They work by onclick attribute however when i click just for the second function, first one still works.. (Maybe beacuse of input changes..) I tried "return" or "break" to terminate but they didnt help. How can i terminate the function if it has finished its job.
■ HTML tags;
<input id="File1" type="file" name="galeri[]" accept="image/*" hidden="">
<label id="Label1" class="uploadProductPic" data-no="1" for="File1" onclick="myFunction(this)"><i class="fas fa-plus"></i></label>
and if i added a new picture codes below will be creating by myFunction
<div id="Picture1" onmouseover="mouseOnPic(this)" onmouseout="mouseOutPic(this)" class="ilanPreview d-flex justify-content-center">
<img src="img/pgiysi/pgiysi-44-2761428725-1.png" class="d-block" id="imgPicture1">
<div class="ilanPreviewEdit" hidden="true" data-edit="1" onclick="myEdit(this)"><i class="fas fa-edit"></i><div class="ilanPreviewEEText">Düzenle</div></div>
<div class="ilanPreviewErase" hidden="false" onclick="myErase(this)"><i class="fa fa-trash-o"></i><div class="ilanPreviewEEText">Sil</div></div>
</div>
■ First function is; (Creates a preview of image for the selected file from input and creates a new add input type="file")
var i = 1;
function myFunction(identifier) {
i++
no = $(identifier).data('no');
var loader = function(e) {
//content goes here
//create a preview of image
//add a new input file
}
var fileInput = document.querySelector("#File"+editNo);
fileInput.addEventListener("change", loader);
};
■ Second function is; (Jjust for the changing picture. If user clicks on the change button - that created on preview image before, so this function changes the preview of image.
function myEdit(identifier) {
var editNo = $(identifier).data('edit');
document.getElementById('File'+editNo).click();
var editor = function(e) {
//content goes here
//change the preview of image
return false; //After changing picture stop here and dont step to the first function again...
}
var fileInput = document.querySelector("#File"+editNo);
fileInput.addEventListener("change", editor);
};
When I click to change the picture, yes it changes but at the same time function add a new preview (same with selected one for the change and adds a new input file so i have 2 previews and 2 add buttons)

Related

Hide/Show Elements and Change Button

I would like to have a button that, when clicked, hides one element and shows another, and to have the button change text when clicked (I think I got this part). Also, I'd like to only display one of the elements upon loading the page, and when the button is clicked, to only display the other element. The code I am using currently almost accomplishes this correctly, but upon clicking the button, the hidden element is displayed (desired) but the other element that was displayed is not hidden. Here is my code (I am using basic JS, I don't want to use jQuery).
The HTML
<html>
<body>
<div>
<span>E-Mail or Phone<br>
</span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
</body>
and the javascript
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Phone';
}
else {
// clock is hidden. show it
myPhone.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
You also need to toggle your email input embox
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
var myEmail = document.getElementById('embox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
myEmail.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Phone';
} else {
// clock is hidden. show it
myPhone.style.display = 'block';
myEmail.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
<div>
<span>E-Mail or Phone<br></span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>

Using html2canvas to convert to image on keyup & keypress

I am building a application where user can write something inside input and it will be converted to a image they can download.
I use html2canvas.js for converting text to a downloadable image (this part works fine)
Currently it take the text inside <div id="talltweets"></div> and converts it to a image, but what I want is to be able to change the text/image when writing text inside input.
I tried to make a function called edValueKeyPress and it takes whats inside the input and adds it into <div id="talltweets"></div>, Now how can I take the text inside #talltweets and add it to <img id="textScreenshot"/> in realtime/when writing?
This is my code:
html2canvas(document.getElementById("talltweets"), {
onrendered: function(canvas) {
var screenshot = canvas.toDataURL("image/png");
document.getElementById("textScreenshot").setAttribute("src", screenshot);
}
});
function edValueKeyPress() {
var edValue = document.getElementById("body");
var s = edValue.value;
var lblValue = document.getElementById("talltweets");
lblValue.innerText = s;
}
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body">
<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
<img id="textScreenshot" />
</div>
Basically, you need to wrap that whole rendering step of the process into a function that can then be called with the keypress event. You're already on the right track - here's one way you could implement this (plus a few miscellaneous code improvements; also, I had to change the URL for html2canvas to pull from a different cdn, as the original one wasn't loading correctly from SO):
// If we store these, we only need to query the dom once, not on every update
var tallTweets = document.getElementById('talltweets');
var screenshotImg = document.getElementById('textScreenshot');
var textInput = document.getElementById('body');
// Note - it wouldn't surprise me if html2canvas has a specific API
// for doing this kind of update. Worth checking their documentation for.
function updateImage() {
html2canvas(tallTweets, {
onrendered: function(canvas) {
var screenshot = canvas.toDataURL("image/png");
screenshotImg.setAttribute("src", screenshot);
}
});
};
function edValueKeyPress() {
tallTweets.innerText = textInput.value || '';
updateImage();
}
updateImage();
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body" placeholder="Type something!">
<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
<img id="textScreenshot" alt="Generated screenshot" />
</div>
You could also make it even simpler by combining the two functions into one - IE, moving tallTweets.innerText = textInput.value into updateImage, and then binding the event listener to updateImage instead. But keeping them separated has its advantages, especially if you might want to reuse updateImage elsewhere.

Using javascript to focus on an element dynamically

In my HTML I load a table of unknown elements using a for loop. Each element has a link associated with it and also an textarea. I want a user to be able to click on the link then be redirected to the associated url. This is fine, but I also want the user to be able to long press on the element(which is an image) and be able to edit the textarea, which gets saved once they click away from the textarea.
My problem is as each element of the table has the same id/classname how do I get my javascript to focus just on the right textarea?
My code...
<g:each in="${files}" var="d">
<a class = "file" href="${d.uniquelink}" ><image id = "fileIcon" src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/>
<textarea class="captionText" rows="1">${d.name}</textarea>
</a>
</g:each>
This loads a html table with different images and different unique links and each images name by default in the textarea. This is fine....
Now I want when a user longholds on the image it puts focus on the texarea of that element so it can be edited.
$('.file').mousedown(function() {
timeoutId = setTimeout(myFunction, 1000);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeoutId);
});
This is how I am checking to see if is longpressed.
Then I have tried the following various ways but to no avail, how do I get the textarea associated with the longhold press.
function myFunction(focused){
// var focusedElement = document.activeElement;
// document.getElementsByClassName(".captionText").focus();
// $(".captionText").focus();
// .focus();
//window.alert(focusedElement.tagName);
}
What happens is it focuses on the last textarea in the table, regardless of which one is clicked.
Would it be bad practice to create a unique id for each <a> in the table i.e from my database? (See I don't want the user to be able to see unique ids associated with the files)
Any help would be much appreciated.
var timeoutId;
$('.file').mousedown(function() {
var $link = $(this);
var $textArea = $('.captionText', $link);
timeoutId = setTimeout(function() {
doFocus($textArea);
}, 1000);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeoutId);
});
function doFocus($textArea){
$textArea.focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class = "file" href="#" ><image id = "fileIcon" src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-64.png" width="100px" height="100px"/>
<textarea class="captionText" rows="1">First Text </textarea>
</a>
<br/>
<a class = "file" href="#" ><image id = "fileIcon" src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/jpgs-64.png" width="100px" height="100px"/>
<textarea class="captionText" rows="1">Second Text </textarea>
</a>
Within a jQuery event handler, this is the element the event occured on. That makes traversals to other specific element instances relatively simple.
You could use next() based on html shown
var timeoutId;
$('.file').mousedown(function() {
var $textArea = $(this).next();
timeoutId = setTimeout(function() {
myFunction($textArea);
}, 1000);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeoutId);
});
function myFunction($textArea){
$textArea.focus()
}

Making image buttons on select few

So I'm doing a site, where the viewers will be able to go in and look at dresses that are for sale. When they first load the page, an image is put into the div "Dress" and thats the front of the dress. Underneath is four buttons that each have a class and the background images for the buttons are other sides of the dress. I'm using a database to store all the image paths to get to the different images of each dress. But now, when you click the drop down, it wants to use it as an "Image button". This is my code.. I'm not sure how to explain it, but I don't want it thinking the drop down is another a href tag for an image, but now it is an actual link.
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
<div id="Dress"><img src="" alt=""/></div>
<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];
for(i = 0; i < a.length; i++)
{
a[i].onclick = function(){
popup.style.display="block";
img.src = this.href;
img.alt = this.innerHTML;
return false;
}
}
I also have some of the drop down code.
<li>Prom</li>
<li>Ballgown</li>
<li>Special Occassion</li>
When these buttons are clicked to go to another page, in the div "Dress" it says the name of the link. Like Prom, or Ballgown, or Special Occassion. Is there a way I can edit my script maybe so it only checks these first four a href's?
This line:
var a = document.getElementsByTagName("a")
Is getting all of the a elements on the page including those in your drop down. You want to do something like this:
HTML:
<div id="DressButtons">
<button class="Front"></button>
<button class="Back"></button>
<button class="Side"></button>
<button class="Other"></button>
</div>
JavaScript:
var buttons = document.getElementById("DressButtons"),
a = buttons.getElementsByTagName("a")

find the img id and src and adding to the array

Heres my html code:
<div id="cmdt_1_29d" class="dt_state2" onclick="sel_test(this.id)">
<img id="cmdt_1_29i" onclick="dropit('cmdt_1_29');"
src="http://hitechpackaging.zes.zeald.com/interchange-5/en_US/ico_minus.png">
<span class="dt_link">
CARTON & BOARD
</span>
</div>
<div id="cmdt_2_31d" class="dt_istate1" onclick="sel_test(this.id)">
<img src="/site/hitechpackaging/images/items/test.jpb ">
CORRUGATED & CORNER BOARD
</div>
The dropit function modifies my img src which I dont want to, unfortunately I cant modify,
Can I somehow read the data into array before it is being modified and that I can add the data back to the image.
To remove the click handler:
var i = document.getElementById('cmd1_1_29i');
i.onclick = null;
Or, if you want to still call the original click handler:
var i = document.getElementById('cmd1_1_29i');
_onclick = i.onclick;
i.onclick = function(e) {
// do what you want here
_onclick && _onclick.apply(this, [e]);
}
​

Categories