We Keep Coding

Copy a variable from the console to the clipboard

I created a spreadsheet to keep track of all the videos uploaded by the YouTubers I follow. Then, I created a script to be executed from the console that lists all the videos of that user. I store the list in a variable, and then I log it, select it, and copy it to the clipboard, but I'd like to copy it automatically every time I run the script. The problem is that the text is not inside an element (like a div, or textarea), so I can't use either window.navigator.clipboard or document.execCommand('copy').
Is there a way to do that?.
Thanks & greets from Argentina (Hope it is from England someday).
IDsign4U (Marcelo Miguel Bazan).
This is the code I use (open the videos tab in any channel and try it):
console.clear();
console.log("Título + Duración + Estado + URL en Subscripciones (sin número de orden)");
var domains = "";
var i = "";
var text = "";
var title = "";
var duration = "";
var hours = "";
var link = "";
var video = "";
var textDuration = "";
var hoursCheck = "";
var finalDuration = "";
var finalTitle = "";
domains = document.getElementsByTagName('ytd-grid-video-renderer')
for (i = 0; i < domains.length; i++)
{title = domains[i].getElementsByTagName('h3');
duration = domains[i].getElementsByTagName('span');
link = domains[i].getElementsByTagName('a');
textDuration = duration[0].innerText.trim();
hoursCheck = "";
hoursCheck = textDuration.length > 5 ? "0": "00:";
finalDuration = hoursCheck + textDuration + "\t" + "P" + "\t";
finalTitle = title[0].innerText + "\t";
url = "https://www.youtube.com" + link[0].attributes['href'].value;
video = video + finalTitle + finalDuration + url + "\n";}
console.log(video);

Why shouldn't you be able to use navigator.clipboard? It works fine while providing variables to copy to clipboard.
document.getElementById("copy").addEventListener("click", async () => {
const text = "Text copied to the clipboard"
await navigator.clipboard.write(text)
})
<button id="copy">
Copy to clipboard
</button>

When you say "from the console", do you mean the browser console? If so, there's a built-in global copy function (not window.copy, just copy).

Yes!! Thank you Zac (and wOxxOm and Jannis Ioannou) for the answer.
It's just a matter of deleting the, for me, weird DOM element with the ID 'copy' to be able to use the copy function in the console.
Thanks & greets from Argentina (Hope it is from England someday).
IDsign4U (Marcelo Miguel Bazan).

multi upload images in same sequence as user input

I have a multi-upload for image files, and the problem that I used to face was that the images are appearing in a different sequence as the user's input. For example, user selects Img1, Img2, Img3, Img4. The sequence that it appears might be Img2, Img4, Img3, Img1.
This causes a problem as I have to link them to a text field (image description), and each text field has to match the right image. I did some digging and found out that i can use this code here to make sure that it is being uploaded in the same sequence:
html
<input id="uploadfiles" multiple="multiple" name="photos" type="file">
javascript
$("#uploadfiles").change(function(){
imgpreview(document.getElementById('uploadfiles').files);
});
function imgpreview(files) {
var count = 0;
for (var i = 0, f; f = files[i]; i++) {
(function () {
var div = $("<div></div>");
var reader = new FileReader();
$(".display").append(div);
reader.onload = function(e) {
div.append("<img id='photocount" + count + "' src='" + e.target.result + "' style='height:40px;width:auto;'></img>");
count++;
};
reader.readAsDataURL(f);
}());
}
}
It is also available in fiddle here: https://jsfiddle.net/L3d1L9t3/1/
This javascript code here ensures that the images are appearing in sequence. However, the id for the images are still not in order. For example, if 4 images are uploaded, the ids should be photocount0, photocount1, photocount2, photocount3 respectively. But this is not the case when i inspect element on each of the images.
How do i ensure that the "count" is in sequence as well? This is important since i need to match the count to the text field (image description) as well ["image 1" is paired with "image description 1", "image 2" is paired with "image description 2" and so on]

Use URL.createObjectURL(file) instead it's both faster and easier since it's sync - you don't have to encode/decode back and fort to/from base64 then
$("#uploadfiles").change(function() {
// imgpreview(document.getElementById('uploadfiles').files); <-- not needed
imgpreview(this.files)
})
function imgpreview(files) {
var url, div, len = files.length
var $display = $(".display")
for (var i = 0; i < len; i++) {
url = URL.createObjectURL(files[i])
div = $('<div>')
$display.append(div)
div.append("<img id='photocount" + i + "' src=" + url + " style='height:40px;width:auto'>")
}
}

Replace text to image in jquery

This is my jquery script for validating the file extension.
function ValidateExtension() {
var allowedFiles = [".csv", ".xlsx", ".txt"];
var fileUpload = document.getElementById("product_file1");
var lblError = document.getElementById("lblError");
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
if (!regex.test(fileUpload.value.toLowerCase())) {
lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
return false;
}
lblError.innerHTML = "Your file has been imported.Please wait few for minutes";
return true;
}
Here! what I am trying to do, The above code is like this:
lblError.innerHTML = "Your file has been imported.Please wait few for minutes";
But I am changing link this,
lblError.innerHTML = '<img src="/assets/spin.gif">';
NOTE:Why? I am editing this code means.When i have to uploading a file the message will be display the text but i want display image only,
This is possible?

Always remember you need to use escape characters while you try to insert an image tag in innerHTML component. Do it like this and it will 100% work .Try this code below
<img src=\`assets/spin.gif\`>
Let me know if that helps :)

Yes, is possible.
Look https://jsfiddle.net/1kzoqg8x/
var lblError = document.getElementById("lblError");
lblError.innerHTML = '<img src="http://media.iterar.co/app-site/images/spinner.gif" />';
This is it you need?

JavaScript: string use in dynamic HTML

I'm new to JavaScript and have an issue with passing a string to 'innerHTML' as part of the dynamic creation of an HTML document. Reason for this: I need to specify an image path and want to be able to output a different image onto the screen depending on the details retrieved from a cookie (i.e. the image path changes each time so that image = 1001.jpg, image = 1002.jpg etc, depending on the object details retrieved). At present, unless I hardcode the line:
"<p><img src=\images/1005.jpg"\"</p>";
I don't get an output. I tried various ways of inputting a string into this line but no joy so far. My code is probably not the best, but it works, apart from the image issue:
function changeMe(){
...
var studentObject = JSON.parse(getName); // info from cookie
var path = studentObject.imagePath; // works: images/1005.jpg
var res = path.charAt(10)
//alert(res); // = 5, works
var newPath = "<p><img src=\"images/1001.jpg\"></p>";
// I 'amend' the newPath string value:
**var answer = newPath.substr(0, 23) + res + newPath.substr(25.26);**
//alert(answer); // works: <p><img src=\"images/1005.jpg"\</p>
var oPara = document.createElement('p');
oPara.style.fontFamily = "Arial sans-serif";
oPara.style.fontSize = "20px";
oPara.style.color = "#77787E";
oPara.style.fontWeight = "bold";
oPara.innerHTML = "<p><br>Name & Surname: " + studentObject.name + " " +
studentObject.surname + "</p>" + answer; // doesn't work
//"<p><img src=\\" + "\"" + path + "\"" +"></p>"; // this doesn't work either
document.body.appendChild(oPara);
}
What am I missing here?

Is this example helps?
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<script type='text/javascript'>
function AddStudent() {
var studentData = { "name":"John Dou" }; // for the exmaple.
var paragraph = document.createElement('p');
// set any style
paragraph.innerHTML = "The student " + studentData.name + " added to the family";
document.body.appendChild(paragraph);
}
</script>
</head>
<body>
<button onclick='AddStudent()'> Add Student </button>
</body>
</html>

Insert image in excel using javascript

My html page contain a embedded image (png) that I like to insert into the excel file dynamically. I tried below that created the excel file with the name I like and a worksheet name as well * though the name of worksheet is same as file name, not sure how to set that, with below code
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
var postfix = 'AKS'
//getting data from our div that contains the HTML table
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('myDynamicImage');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
But the content of image in dataURI format is inserted in excel as a text rather then image. Can I setup this for image. can I control the position etc. can i control the worksheet name, I did that with some other but bit complicated way called tableToExcel.