Any javascript expert in the house?

Stewie_Griffin · November 11, 2021, 8:15am

Hi guys, I am having a problem implementing a js application on my website. The weirdest part is that if I create a landing page with code it works, but when I do the same in blocs my button does not respond. I mean, it pulls the code but with errors so it doesn’t work.

Here is a snippet of the code I am using to see if anyone can find a solution. Thanks a lot in advance.

<div class="row voffset-lg voffset-lg-md voffset-lg-sm voffset-md-xs">
  <div class="align-self-center calculator-box col-lg-6 offset-lg-3 col-md-6 offset-md-3 col-10 offset-1 col-sm-8 offset-sm-2">
    <div class="numero-streams">
      <div class="row voffset-md">
        <div class="col">
          <p class="stream-class mg-md">
            Estimated number of streams
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 offset-lg-4">
          <div class="form-group">
            <input class="form-control calculator-input" type="number" min="1" step="1" name="num" id="num" required />
            <div class="text-center">
              <input class="btn btn-d btn-block btn-calculator btn-rd" type="button" value="Calculator" onclick="calc()" id="btncalcular">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here the javascript code:

   let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')

// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();

// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
// 	let cotacaoDolar = JSON.parse(request.response);
// 	let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// codigo acima funciona, entender Promise e then para criar let real

let dolar = {
	Spotify: 0.00296,
	Deezer: 0.00478,
	Amazon: 0.00362,
	Apple: 0.00574,
	Ytmusic: 0.00625,
	Tidal: 0.00745,
	Yt: 0.00059,
};

function calc() {
	if (numeroStreams.value > 0) {
		res.innerHTML = `<div class="row " id="stores-container">
						<div class="col">
							<div class="row voffset-md">
								<div class="col-lg-4">
									<div class="row platforms-spotify">
										<div class="align-self-center col-lg-5">
											<img src="img/spotify_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="spotify_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="cal-store-style mg-clear">
												Spotify
											</h2>
											<p class="currency mg-clear">R$ ${(numeroStreams.value*real.Spotify).toFixed(2)}</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platforms-deezer">
										<div class="align-self-center col-lg-5">
											<img src="img/deezer-logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="deezer_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="cal-store-style mg-clear">
												Deezer
											</h2>
											<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platform-amazon">
										<div class="align-self-center col-lg-5">
											<img src="img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="amazon_music_logo">
										</div>
										<div class="align-self-center stores-cal-info col-lg-7">
											<h2 class="mg-clear cal-store-style">
												Amazon Music
											</h2>
											<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
										</div>
									</div>
								</div>
							</div>
							<div class="row voffset">
								<div class="col-lg-4">
									<div class="row platforms-apple">
										<div class="align-self-center col-lg-5">
											<img src="img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="youtube_music_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="mg-clear cal-store-style">
												Apple Music
											</h2>
											<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platforms-ytmusic">
										<div class="align-self-center col-lg-5">
											<img src="img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="youtube_music_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="mg-clear cal-store-style">
												Youtube Music
											</h2>
											<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platforms-tidal">
										<div class="align-self-center col-lg-5">
											<img src="img/tidal_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="tidal_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="cal-store-style mg-clear">
												Tidal
											</h2>
											<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
										</div>
									</div>
								</div>
							</div>
							<div class="row voffset">
								<div class="col-lg-4">
									<div class="row platforms-soundcloud">
										<div class="align-self-center col-lg-5">
											<img src="img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="soundcloud_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="mg-clear cal-store-style">
												SoundCloud
											</h2>
											<p class="currency mg-clear text-lg-left">
												$ 10&nbsp;
											</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platforms-tiktok">
										<div class="align-self-center col-lg-5">
											<img src="img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="tiktok_logo">
										</div>
										<div class="align-self-center col-lg-7">
											<h2 class="cal-store-style mg-clear">
												TikTok
											</h2>
											<p class="currency mg-clear">
												$ 10&nbsp;
											</p>
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="row platforms-youtube">
										<div class="col-lg-6 align-self-center">
											<img src="img/youtube_logo.png" class="img-fluid img-protected logo-cal-style float-lg-none" alt="youtube_logo">
										</div>
										<div class="col-lg-6 align-self-center">
											<h2 class="cal-store-style mg-clear">
												Youtube
											</h2>
											<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>`
	} else {
		window.alert('Estimated streams number cannot be blank.')
	}
}

Jannis · November 11, 2021, 8:22am

You’re using document.getElementById but in your HTML markup, you’re not having any IDs.

Stewie_Griffin · November 11, 2021, 8:31am

Do you mean this id? <div id='res'></div>

Here is the full html code:

<div class="row voffset-lg voffset-lg-md voffset-lg-sm voffset-md-xs">
			<div class="align-self-center calculator-box col-lg-6 offset-lg-3 col-md-6 offset-md-3 col-10 offset-1 col-sm-8 offset-sm-2">
				<div class="numero-streams">
					<div class="row voffset-md">
						<div class="col">
							<p class="stream-class mg-md">
								Estimated number of streams
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-4 offset-lg-4">
							<div class="form-group">
								<input class="form-control calculator-input" type="number" min="1" step="1" name="num" id="num"  required/>
								<div class="text-center">
									<input class="btn btn-d btn-block btn-calculator btn-rd" type="button" value="Calculator" onclick="calc()" id="btncalcular">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	        <div id='resultado'></div>

Maybe Im adding it in the wrong place?

Stewie_Griffin · November 11, 2021, 8:34am

and this is the one that works in a custom html landing page:

   <section>
        <div class="numero-streams">
            <p>Streams number<br>
                <input type="number" min="1" step="1" name="num" id="num"  required><br>
                <input type="button" value="Calcular" onclick="calc()" id="btncalcular">
            </p>
        </div>
        <hr>

        <div id='res'></div>
i
        <p id="obs"><em>This tool should be used as a guide only. These figures are an estimate and do not guarantee earnings.</em></p>
    </section>

Can we make sections in blocs?

PeteSharp · November 11, 2021, 8:42am

Rename that to res, you are using the variable name as the id, not the Id the variable is looking for.

I’m only on my iPad.

Stewie_Griffin · November 11, 2021, 8:42am

Also when I create a landing page with blocs and remove all the code from blocs and add this

 <section>
        <div class="numero-streams">
            <p>Streams number<br>
                <input type="number" min="1" step="1" name="num" id="num"  required><br>
                <input type="button" value="Calcular" onclick="calc()" id="btncalcular">
            </p>
        </div>
        <hr>

        <div id='res'></div>
i
        <p id="obs"><em>This tool should be used as a guide only. These figures are an estimate and do not guarantee earnings.</em></p>
    </section>

it doesn’t work either

Stewie_Griffin · November 11, 2021, 8:45am

It was in res, but I switched to result to check if it would work but it did not. Weird. I don’t understand why it works with a custom html but not with the one generated by blocs. I already deleted all the bootstrap, css, scripts to see and nothing.

PeteSharp · November 11, 2021, 8:46am

Did you add the script after the html? (Page footer)

I’m not on my Mac so can’t look at your page. Maybe Jannis will pop back lol

Stewie_Griffin · November 11, 2021, 8:50am

I have a small one but also a file with the main script

in the footer is this one:

    <script type="text/javascript">
    document.addEventListener('keydown', function(e) {
        if(e.key == "Enter"){
            document.getElementById("btncalcular").click();
        }
    });
    </script>

Whittfield · November 11, 2021, 4:10pm

I just saw this, maybe it’s fixed. anyway cool site.

Stewie_Griffin · November 11, 2021, 6:18pm

Thank you Not fixed Could you try to implement this maybe on a simple page?

PeteSharp · November 11, 2021, 6:22pm

Seems to be working for me as @Whittfield said

Stewie_Griffin · November 11, 2021, 7:27pm

Do you mean on my website? Forward | Royalty Calculator. this? it doesn’t work for me and I have tried on different computers.

PeteSharp · November 11, 2021, 7:44pm

Personally I wouldn’t use combine all on the js for export. But this is how it works for me.

Stewie_Griffin · November 11, 2021, 7:45pm

Im dying now. How is that even possible?

Stewie_Griffin · November 11, 2021, 8:02pm

I’m testing in a bunch of browsers and clearing my cache, but I can’t see it working.

I get all those errors:

<link rel=preload> has an unsupported `type` value
rocket-loader.min.js:1 GET about:blank net::ERR_UNKNOWN_URL_SCHEME
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.forEach @ rocket-loader.min.js:1
t.insertPreloadHints @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
VM262:8 GET about:blank net::ERR_UNKNOWN_URL_SCHEME
(anonymous) @ VM262:8
(anonymous) @ VM262:8
t.activateScript @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
t.runOnLoad @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
all.js?5258:50 Uncaught SyntaxError: Identifier 'numeroStreams' has already been declared
(index):165 Uncaught ReferenceError: calc is not defined
    at HTMLInputElement.onclick ((index):165)

Stewie_Griffin · November 11, 2021, 8:15pm

AdieJAM · November 11, 2021, 8:34pm

Hi @Stewie_Griffin - its working for me too here in the UK! - the text would look nicer in white as it drops down?

Also have you tried other devices, tablets etc.

but all good here ! - sorry I can’t be anymore help than that!

Stewie_Griffin · November 11, 2021, 8:37pm

Thanks a lot. I haven’t done any CSS on the drop-down text yet cause I just cant see it. Getting crazy cause tried in 3 computers plus my phone and it doesn’t seem to work haha

Stewie_Griffin · November 11, 2021, 8:44pm

I just connected through a VPN and I could see that it works. Do you think the internet provider or my host may be blocking me in some way?