Make class combinator open page in separate tab

Question

I have a code in which he creates me a page as if it were a theme, picking randomly the css classes, but what he does is create the "theme" within the page that this button, and would like it opened up a new page with the selected theme.

Follow the code js

Code that generates the classes

var classesRM = ['fundoRomantico', 'fundoRomantico1', 'fundoRomantico2'];
var classestopoRmt = ['topo-romantico', 'topo-romantico1', 'topo-romantico2'];
var classesmenuRmt = ['romantico-menu-01', 'romantico-menu-02', 'romantico-menu-03'];
var classesfootRmt = ['footer-romantico', 'footer-romantico1', 'footer-romantico2'];

var classesFontTexto = ['font-romantico', 'font-romantico1', 'font-classica', 'font-classica1', 'font-moderno', 'font-moderno1'];
var classesFontTitulo = ['font-titulo-romantico', 'font-titulo-romantico1', 'font-titulo-classica', 'font-titulo-classica1', 'font-titulo-moderno', 'font-titulo-moderno1'];
var classesMenu = ['menu-01', 'menu-02', 'menu-03'];
var classesTexto = ['textoBranco', 'textoPreto', 'textoCinza'];
function sorteia(arr) {
    var rand = Math.floor(Math.random() * arr.length);
    return arr[rand];
}

Button code

document.getElementById('troca').addEventListener('click', function() {
    var classeRM = sorteia(classesRM);
    var classetopoRmt= sorteia(classestopoRmt);
    var classemenuRmt= sorteia(classesmenuRmt);
    var classeFontTexto = sorteia(classesFontTexto);
    var classeFontTitulo = sorteia(classesFontTitulo);
    var classeTexto = sorteia(classesTexto);
    var classeMenu = sorteia(classesMenu);
    var elemento = document.getElementById('navbar');
    elemento.className = classemenuRmt;
    var elemento = document.getElementById('nav-bar');
    elemento.className = classeMenu;
    var elemento = document.getElementById('titulo');
    elemento.className = classeFontTitulo;
    var elemento = document.getElementById('topo');
    elemento.className = classetopoRmt;
    var elemento = document.getElementById('body');
    elemento.className = classeRM + ' ' + classeTexto + ' ' + classeFontTexto;
}); 

Answer 1

If you change your logic a little you can do as you please.

Use Event Handler only to open a new page:

document.getElementById('troca').addEventListener('click', function() {
  var win = window.open(location.origin, '_blank');
  win.focus();
}); 

and then within each page run the rest of the code in the page load:

window.onload = function(){
    var classeRM = sorteia(classesRM);
    var classetopoRmt= sorteia(classestopoRmt);
    // etc...

The complete code could be:

(function () {
    var classesRM = ['fundoRomantico', 'fundoRomantico1', 'fundoRomantico2'];
    var classestopoRmt = ['topo-romantico', 'topo-romantico1', 'topo-romantico2'];
    var classesmenuRmt = ['romantico-menu-01', 'romantico-menu-02', 'romantico-menu-03'];
    var classesfootRmt = ['footer-romantico', 'footer-romantico1', 'footer-romantico2'];

    var classesFontTexto = ['font-romantico', 'font-romantico1', 'font-classica', 'font-classica1', 'font-moderno', 'font-moderno1'];
    var classesFontTitulo = ['font-titulo-romantico', 'font-titulo-romantico1', 'font-titulo-classica', 'font-titulo-classica1', 'font-titulo-moderno', 'font-titulo-moderno1'];
    var classesMenu = ['menu-01', 'menu-02', 'menu-03'];
    var classesTexto = ['textoBranco', 'textoPreto', 'textoCinza'];

    function sorteia(arr) {
        var rand = Math.floor(Math.random() * arr.length);
        return arr[rand];
    }
    window.onload = function () {
        document.getElementById('troca').addEventListener('click', function () {
            var win = window.open(location.origin, '_blank');
            win.focus();
        });

        var classeRM = sorteia(classesRM);
        var classetopoRmt = sorteia(classestopoRmt);
        var classemenuRmt = sorteia(classesmenuRmt);
        var classeFontTexto = sorteia(classesFontTexto);
        var classeFontTitulo = sorteia(classesFontTitulo);
        var classeTexto = sorteia(classesTexto);
        var classeMenu = sorteia(classesMenu);
        var elemento = document.getElementById('navbar');
        elemento.className = classemenuRmt;
        var elemento = document.getElementById('nav-bar');
        elemento.className = classeMenu;
        var elemento = document.getElementById('titulo');
        elemento.className = classeFontTitulo;
        var elemento = document.getElementById('topo');
        elemento.className = classetopoRmt;
        var elemento = document.getElementById('body');
        elemento.className = classeRM + ' ' + classeTexto + ' ' + classeFontTexto;
    }
})();

It would be interesting to optimize this code to not be so extensive. That is to do the same but with fewer lines of code. I didn’t touch it, just another question.