We Keep Coding

Is there a way to implement HTML hrefs into a JS array, and when called on opens the respective link?

I have a JavaScript array and I wanted to put HTML links in that array. I don't know if there is a certain way to go about this. Also, if it's possible, when the user clicks the button and it selects the link, is there a way to make that link open up in a new tab (I know in HTML its target=_blank). I appreciate any help as always.
JavaScript:
var i = Math.floor(Math.random() * 10) +1;
function randomPageWithJS() {
const arrayJS = [link1, link2, link3, link4];
document.getElementById('randomPageWithJS').value = arrayJS[i];
}
randomPageWithJS();
HTML:
<form>
Random Song:<input type="text" id="randomPageWithJS" name="randomPage"/>
<input type="button" value="RandomPage" onclick="randomPageWithJS()" width="1000"/>
</form>

Use window.open
window.open(arrayJS[i], '_blank');
Example:
function randomPage() {
const links = ['https://google.com', 'https://stackoverflow.com', 'https://stackoverflow.com/questions/56139010/'];
window.open(links[Math.floor(Math.random()*links.length)], '_blank');
}
<input type="button" value="Random Page" onclick="randomPage()">

Refresh Button when clicking on it

I got a button which i want to reload on click. But only the button should be reloaded, not the rest of the page.
The button looks like this:
<a href="{$module_data.GM_PRODUCTS_BUTTON_BUY_NOW_URL}" id="click{php}echo ''.$counter.'';{/php}" class="addcart button_green button_set action_add_to_cart"{if $module_data.PRODUCTS_NAME != ''} title="{$module_data.PRODUCTS_NAME|replace:'"':'"'} {$txt.text_buy}"{/if}
onclick="return checkAddToCart(event, '{$module_data.QTY_DATA.ID}', {$product_stock}, {$product_max_order}, {$module_data.PRODUCTS_ID}, {php}echo $row['customers_basket_quantity']{/php}, {php}echo "'click".$counter."'";{/php});">
<span class="button-outer">
<span class="button-inner">{$button.add_to_cart}</span>
</span>
</a>
Now i told javascript that echo "'click".$counter."'"; is the clickid.
I tried the following thing to reload my page on click:
function checkAddToCart(event, tid, stock, maxallowed, pid, pquantity, clickid)
{
var clickid_string = clickid.toString();
var bought = Number($("#"+tid).val());
stock = Number(stock);
maxallowed = Number(maxallowed);
var ans = (bought>stock) || (bought > maxallowed);
if(ans)
{
event.stopPropagation();
event.preventDefault();
alert("Maximale Bestellmenge: " + Math.min(maxallowed, stock));
}
else {
$("#"+clickid_string).load("#"+clickid_string);
}
return !ans;
}
It is not working, and i have absolutly no idea why. By the ay, my system works with SMARTY tpl.

If you want to run a php script on click of a button you need to learn ajax. Ajax its just a simple way to use javascript, to run pages in background without reload the current page.
<span class="button-outer" onClick="addDataToDB(this);">...</span>
<script>
function addDataToDB(el) {
var elem = $(el);
/* GET ALL YOUR DATA*/
var name = ...
/* Create an AJAX request to your phpfunction */
}
</script>
Check some tutorials in youtube.

Display html link with javascript

In some part of an html page, I have a link with the following code :
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
I would like to automatically display the same link in another part of the same page by using a javascript.
What would be the script to insert in my page ?
Thank you in advance for any help in this matter.
Patrick

Try this:
myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);

As son as you know the target id:
<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>
And If you are using jQuery you can do like this:
var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);
If not:
var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);
See this Example

<script>
window.onload = function() {
// get data from link we want to copy
var aHref = document.getElementById('idname').href;
var aText = document.getElementById('idname').innerHTML;
// create new link element with data above
var a = document.createElement('a');
a.innerHTML = aText;
a.href = aHref;
// paste our link to needed place
var placeToCopy = document.getElementById('anotherplace');
placeToCopy.appendChild(a);
}
</script>
Use code above, if you want just to copy your link to another place. JSFiddle

First, I want to point out that if you will just copy the element that will throw an error because the copied element will have the same id of the first one, so if you will create a copy of your element you don't have to give it the same id.
Try this code:
function copyLink(newDestination){
var dest=document.getElementById(newDestination);
var newLink=document.createElement("a");
var myLink=document.getElementsByClassName("classname")[0];
newLink.href=myLink.href;
newLink.className = myLink.className;
newLink.innerHTML = myLink.innerHTML;
newDestination.appendChild(newLink);
}
The newDestination parameter is the container element of the new Link.
For example if the new Container element has the id "div1":
window.onload = function() {
copyLink(div1);
}
Here's a DEMO.

Thank you very much to everyone for so many prompt replies.
Finally, I was able to use Jquery.
So, I tried the solution given by Andrew Lancaster.
In my page, I added the codes as follows, in this order :
1-
<span id="span1">
<a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
and further down the page :
2-
<script type="text/javascript">
var span1val = $('#span1').html();
$('#span2').html(span1val);
</script>
Therefore, the two expected identical links are properly displayed.
But, unfortunately, I forgot to say something in my initial request:
the original link is in the bottom part of my page
I would like to have the duplicated link in a upper part of my page
So, would you know how to have the duplicated link above the original link ?
By the way, to solve the invalid markup mentioned by David, I just deleted id="idname" from the original link (that I could ignored or replaced by other means).
Thank you again in advance for any new reply.
Patrick

Using Jquery you could wrap your link in a span with an ID and then get the value of that ID and push it into another span id.
HTML
<span id="span1">
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
jQuery
var span1val = $('#span1').html();
$('#span2').html(span1val);
Example can be found here.
http://jsfiddle.net/3en2Lgmu/5/

Javascript not loading correctly in Chrome

I have a messages page where i can see them as a list. If i select each one of them, I display them in the right side of the page. For that, I have two javascript functions for "next" and "previous" buttons for the messages' page. So I have a list of messages on the screen, if I click "next", I see the next page of messages and so on.
Everything work allright, the only problem is in Chrome, it wouldn't load the page number in a span section on the bottom of the page. This is the function for next page:
$("#next").click(function() {
var currentPageElem = $("#currentPage");
var totalPagesElem = $("#totalPages");
var minItemElem = $("#minItem");
var maxItemElem = $("#maxItem");
var totalItemsElem = $("#totalItems");
var itemsOnPageElem = $("#itemsOnPage");
var currentPageValue = parseInt(currentPageElem.val(), 10);
if (currentPageValue < totalPagesElem.val()) {
currentPageElem.val(currentPageValue + 1);
}
//the first record on the current page
minItem = $(this).getMinItem(currentPageElem.val(), itemsOnPageElem.val());
minItemElem.val(minItem);
//the last record on the current page
maxItem = $(this).getMaxItem(currentPageElem.val(), itemsOnPageElem.val(), totalItemsElem.val());
maxItemElem.val(maxItem);
$(this).showItems(minItem, maxItem);
var pageHtml = $(".pages").html();
$(".pages").html($(this).newPageHtml(pageHtml, currentPageElem.val()));
}); });
$.fn.newPageHtml = function(pageHtml, currentPage) {
var idx1=pageHtml.indexOf("Pagina ");
var idx2=pageHtml.indexOf(" / ");
var prevPage = pageHtml.substring(idx1 + 7, idx2);
return pageHtml.replace(prevPage, currentPage);
};
This is the html code that involves the js:
<input type="hidden" id="totalPages" name="totalPages" value="${totalPages}"/>
<input type="hidden" id="currentPage" name="currentPage" value="${currentPage}"/>
<input type="hidden" id="minItem" name="minItem" value="${minItem}"/>
<input type="hidden" id="maxItem" name="maxItem" value="${maxItem}"/>
...
<div class="controls">
<a class="prev" id="prev"></a>
<a class="next" id="next"></a>
<span class="pages">
<fmt:message key="messages.page">
<fmt:param>${currentPage}</fmt:param>
<fmt:param>${totalPages}</fmt:param>
</fmt:message></span></div>

are you try in firefox or safari?
what is your java version?
are you review in about:config if you have enable java/javascript in Chrome

I have solved the problem. There was an issue with the CSS files that wouldn't allow the text to transform correctly in Google Chrome. So I modified the style of the span class from above like this:
<span class="pages" style = " position: absolute; ">
Initially, the position of the span class was relative. I think Chrome has a problem with this type of CSS.

CEWP Print Button with Code to print SharePoint form?

I currently have a Preview of our form that looks exactly how we want it to look for the list item being viewed but the problem is when I added my Print button as CEWP in FOrm Display it performs the exact same function as using Control P and prints the entire page. See code.
<div style="text-align: center"><input onclick="window.print();return false;" type="button" value=" Print this page "/> </div>"
I want to add onto this to have it only print the form and no other content out side of the current view in the window and actually fill an 8.5 by 11.
Any ideas?

Inspired by this InfoPath print button, one solution would be to grab the contents of your CEWP and create a new window that only contains those.
var patt = /**your CEWP ID here***/g;
var alldivs = document.getElementsByTagName('div');
var printpageHTML = '';
for(var i=0; i<alldivs.length; i++){
if(patt.test(alldivs[i].id)){
printpageHTML = '<HTML><HEAD>\n' +
document.getElementsByTagName('HEAD')[0].innerHTML +
'</HEAD>\n<BODY>\n' +
alldivs[i].innerHTML.replace('inline-block','block') +
'\n</BODY></HTML>';
break;
}
}
var printWindow = window.open('','printWindow');
printWindow.document.open();
printWindow.document.write(printpageHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();
Fixed: removed escaping for HTML characters.

Simple print functionality:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>