Develop Reference

How do I use Javascript to delay visibility of a text box and then hide another box after the first becomes visible

Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.
Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)
My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.
I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)
document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 5000);
However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".
Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.

Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.
Start by setting #text45 to hidden in using the Properties & Events panel.
Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):
$w.onReady( () => {
setTimeout(() => {
$w('#text45').show();
$w('#box2').hide();
}, 5000)
} );

Capitalise HTML Element Targeted by CSS Selectors Using jQuery

In line with previous questions, I have another jQuery problem that's doing my head in.
I have an Elementor widget that's outputting a list of attributes that I'm using as a filterable list, so basically, it's a bunch of a tags inside li's.
The problem is, these are being pulled from a different system (long story, not relevant to the question) and it is passing them across in all caps. I want them displaying as capitalised, but because of the nature of text-transform, CSS can't help me.
I've used text-transform to make them all lower case, and now I just want to use jQuery to capitalise them. It needs to be every word as some entries have multiple words in them. However, I'm not getting any results.
The css selectors needed to target the a tags are as follows:
.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a
I've tried loads of different scripts and messed with them for a good hour or two now and managed to get rid of errors (like $ is not a function) but cannot get the text to captialise.
I've mostly been trying exampls from [this thread][1].
Here is what I think is the closest I've come:
<script>
jQuery.fn.capitalize = function() {
jQuery(this[0]).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
jQuery(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
return $word.toUpperCase();
}));
box.setSelectionRange(stringStart , stringEnd);
});
return this;
}
</script>
<script>
jQuery('.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a').capitalize();
</script>
I'm fully aware that it's not structured particularly well and I know it can be neater, but I have tried numerous ways around it to no avail.
This code is currently being run from a HTML widget in the Elementor archive template where this list appears.
I'd really appreciate it is someone could point out the probably really obvious problems so I can learn from how dumb I'm being.
Many thanks.

How to capture / check all URL's with double slashes (//) and correct them (JQuery?)

At the moment we've got a big problem (temporarily)!
In our shop we're using a 3rd party solution for promoting and searching for products.
We have around 3600 products which got harvested in the wrong way - the base-url had an extra forward slash (www.sceneryworkshop.nl//) so now all products are called the wrong way and end-up in nomansland. We started a new data-sync, but it takes a lot of time to get in sync.
So I'm looking for a temporarily solution, even if it's dirty!
I don't have access to .htaccess or other server components. The shop runs on a closed-source platform (Lightspeed HQ) which is based on TWIG.
Anyone who knows how to change or redirect to the correct url? Javascript maybe?
The sources are located and called from a lot of places, so the only solution would be a global function that checks and corrects the url's.
I really hope someone has an answer for me :-)

Hi i have a solution assuming that jquery is loaded after the dom is rendered
$(document).ready(function() {
$('a').each(function() {
$split = $(this).attr('href').split('com//');
$(this).attr('href', $split[0] + 'com/' + $split[1]);
console.log($(this).attr('href'));
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
Note:
If you like to test the link in the snipped; hold ctrl and click on the link.
Update
Ok. i have read your comment and try some stuff in the inspector from your website. The following solution works!
$('body a[href^="https://www.google.com//"]').each(function() {
$x = $(this).attr('href').replace('com//', 'com/');
$(this).attr('href', $x)
console.log($x);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
What i do here is simple, first i search every a element witch contains the following url: https://www.sceneryworkshop.nl//. then replace them with the correct url.

How to recursively get all the links present in a website using Javascript?

I'm looking for the way to recursively find all the links present on any given website. I know how to do this in java but I don't know how it can be done using javascript.
Consider this image represents a website directory and if we provide 'www.abc.com' ,then it should return following output.
www.abc.com\images
www.abc.com\files
www.abc.com\images\a.jpg
www.abc.com\images\b.jpg
www.abc.com\files\aa.txt
www.abc.com\files\bb.txt

Since the question is tagged jQuery, I'll use that. Simply target the a tags.
var linksList = [];
function addLink(url){
if(url!= "" && linksList.indexOf(url) == -1){
links.list.push(url);
scrapePage(url);
}
}
function scrapePage(url){
$.get(url,function(html){
var $iframe = $('body').append('iframe');
$iframe.contents().find("body").html(html);
$iframe.contents().find("body a").each(function(index,link){
addLink(link.href);
});
$iframe.remove();
});
}
$("body a").each(function(index,link){
addLink(link.href);
});
Pretty simple, a function to add links in our list, another to follow the links we add. I decided to put the content of the scraped page inside an iframe to keep everything restrained...
You'll want to add your logic to make sure it takes only links that are from the domain. You might need to play with the URL as it will not be absolute (but considered it is in my code). And so on.

In js getElementsByTagName("a")
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
In jquery $("a")

I think you cannot get all the links of a particular website. But you can get all the link of particular page like below :-
var allLinks = document.getElementsByTagName("a");
Hope it helps. It would be great if you elaborate your issue more.

prefilling dynamically created textbox with javascript in IE

I'm trying to dynamically add some textboxes (input type=text) to a page in javascript and prefill them. The textboxes are coming up, but they are coming up empty. What is the proper way to pre-fill a textbox. Ideally I'd love to use the trick of creating a child div, setting the innerhtml property, and then adding that div to the parent main div but that didn't work. Then I thought I'd use the dom but setting textboxname.value before or after insertion won't work and doing txttextbox.setattribute('value','somevalue') won't work either. Works fine in firefox. What gives? This has to be possible? Here is my code. I know I'm only using string literals, but these will be replaced with the results of a web service call eventually. Below is some code. Oh and how do you format code to show up as you type it? I thought it said to indent four spaces, and I did that but the code is still on one line. Sorry about that.
var table=document.createElement('table');
var tbody=document.createElement('tbody');
var row=document.createElement('tr');
row.appendChild(document.createElement('td').appendChild(document.createTextNode('E-mail')));
var txtEmail=document.createElement('input');
row.appendChild(document.createElement('td').appendChild(txtEmail));
tbody.appendChild(row);
table.appendChild(tbody);
//document.getElementById('additionalEmails').innerHTML="";
document.getElementById('additionalEmails').appendChild(table);

txtEmail.value = 'my text'
Does not work?

You can also use Prototype to do this easily:
document.body.insert(new Element("input", { type: "text", size:20, value:'hello world' }))

I've encountered problems similar to this in the past, and while my memory is a bit fuzzy on why it was happening exactly, I think you may need to make sure the element is actually added to the DOM before modifying its value. e.g:
var txtEmail=document.createElement('input');
document.getElementById('someElementThatAlreadyExists').appendChild(txtEmail);
txtEmail.value = 'sample text';

I ended up solving this problem by injecting the html directly into a page via a child div. That did work, it's just that I am blind and the software I use to read the screen for some stupid reason failed to see the text in the textbox. Go figure. Thanks for the tip on prototype though, if I ever decide not to cheat and add the eleements to the dom directly, I'll do it that way.