Develop Reference

ui-metrics from javascript file

I am trying to build my own Twitter Bot, but I'm stuck at the point where it needs to press a button to continue to the next page. My Page is twitter.com/account/access and when the account is locked it will show javascript on account/access?js=1
with this JS I can obtain the ui_metrics which I need for the next payload. My problem is that I obtain an incorrect UI metrics. The code on account/access?js=1 looks like:
var fioDNpGxgmnkgCviIszx = function() {
$('.Button').prop('disabled', false);function CzHMSLRaxHitXCjrMvSI() {var aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=228;var a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=234;var a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=9;var a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=161;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=~(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428^a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=~a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(XSlSY,HCUYy,sLRiq){function ABGhk(lYBbi){this.rbMeE=function(){return this.mQFmd^lYBbi;}};var JutGW={mQFmd:sLRiq};var kVGSg=new ABGhk(XSlSY);kVGSg.mQFmd=HCUYy;ABGhk.prototype=JutGW;return kVGSg.rbMeE()|(new ABGhk(HCUYy)).rbMeE();}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=~(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=function(lHUyQ,vsVJI,HSoJI){var FtMNB=document.createElement('div');FtMNB.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(FtMNB);function RTiPq(xwdds,nrUno){for(var i=0;i<8;i++){var HyJWh=document.createElement('div');xwdds.appendChild(HyJWh);HyJWh.innerText=nrUno;if((nrUno&1)==0)xwdds=HyJWh;nrUno=nrUno>>1;}return xwdds;};function UWDtX(HyJWh,FtMNB,nrUno){if(!HyJWh||HyJWh==FtMNB) return nrUno%256;while(HyJWh.children.length>0)HyJWh.removeChild(HyJWh.lastElementChild);return UWDtX(HyJWh.parentNode,FtMNB,nrUno+parseInt(HyJWh.innerText));};var nrUno=UWDtX(RTiPq(RTiPq(RTiPq(FtMNB,lHUyQ),vsVJI),HSoJI),FtMNB,0);FtMNB.parentNode.removeChild(FtMNB);return nrUno;}(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(SNUeY,wyMcY,jnUNa){var hPVCO=document.createElement('div');hPVCO.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(hPVCO);function jpszb(dsoIa,gVlrY){for(var i=0;i<8;i++){var kAZuz=document.createElement('div');dsoIa.appendChild(kAZuz);kAZuz.innerText=gVlrY;if((gVlrY&1)==0)dsoIa=kAZuz;gVlrY=gVlrY>>1;}return dsoIa;};function YvUDO(kAZuz,hPVCO,gVlrY){if(!kAZuz||kAZuz==hPVCO) return gVlrY%256;while(kAZuz.children.length>0)kAZuz.removeChild(kAZuz.lastElementChild);return YvUDO(kAZuz.parentNode,hPVCO,gVlrY+parseInt(kAZuz.innerText));};var gVlrY=YvUDO(jpszb(jpszb(jpszb(hPVCO,SNUeY),wyMcY),jnUNa),hPVCO,0);hPVCO.parentNode.removeChild(hPVCO);return gVlrY;}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=~(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~(a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=function(VtQxq,JDmbe,HodKX){var opBXC=document.createElement('div');opBXC.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(opBXC);function kGiOS(bmzQA,vkEop){for(var i=0;i<8;i++){var XdtAo=document.createElement('div');bmzQA.appendChild(XdtAo);XdtAo.innerText=vkEop;if((vkEop&1)==0)bmzQA=XdtAo;vkEop=vkEop>>1;}return bmzQA;};function wTYEk(XdtAo,opBXC,vkEop){if(!XdtAo||XdtAo==opBXC) return vkEop%256;while(XdtAo.children.length>0)XdtAo.removeChild(XdtAo.lastElementChild);return wTYEk(XdtAo.parentNode,opBXC,vkEop+parseInt(XdtAo.innerText));};var vkEop=wTYEk(kGiOS(kGiOS(kGiOS(opBXC,VtQxq),JDmbe),HodKX),opBXC,0);opBXC.parentNode.removeChild(opBXC);return vkEop;}(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4^a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(JGvCJ,CZNEA,ajWfe){var Znwrh=document.createElement('div');Znwrh.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(Znwrh);function WcTis(SzYNI,TwoYh){for(var i=0;i<8;i++){var LQHaS=document.createElement('div');SzYNI.appendChild(LQHaS);LQHaS.innerText=TwoYh;if((TwoYh&1)==0)SzYNI=LQHaS;TwoYh=TwoYh>>1;}return SzYNI;};function Vukgq(LQHaS,Znwrh,TwoYh){if(!LQHaS||LQHaS==Znwrh) return TwoYh%256;while(LQHaS.children.length>0)LQHaS.removeChild(LQHaS.lastElementChild);return Vukgq(LQHaS.parentNode,Znwrh,TwoYh+parseInt(LQHaS.innerText));};var TwoYh=Vukgq(WcTis(WcTis(WcTis(Znwrh,JGvCJ),CZNEA),ajWfe),Znwrh,0);Znwrh.parentNode.removeChild(Znwrh);return TwoYh;}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=~(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29^new Date(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29*10000000000).getUTCDate();aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4^a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8^new Date(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8*10000000000).getUTCDate();a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~(a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29^a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(nEzec,EegJb,rTBen){function ARFVQ(esSLG){this.KVEMV=function(){return this.KkIOD^esSLG;}};var Xopnv={KkIOD:rTBen};var bpsMS=new ARFVQ(nEzec);bpsMS.KkIOD=EegJb;ARFVQ.prototype=Xopnv;return bpsMS.KVEMV()|(new ARFVQ(EegJb)).KVEMV();}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=~(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4|aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=function(xZcWJ,PMxhH,qtcNS){var fkXcC=document.createElement('div');fkXcC.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(fkXcC);function KHNOb(OtqjX,AMEcs){for(var i=0;i<8;i++){var ncNlf=document.createElement('div');OtqjX.appendChild(ncNlf);ncNlf.innerText=AMEcs;if((AMEcs&1)==0)OtqjX=ncNlf;AMEcs=AMEcs>>1;}return OtqjX;};function MseEH(ncNlf,fkXcC,AMEcs){if(!ncNlf||ncNlf==fkXcC) return AMEcs%256;while(ncNlf.children.length>0)ncNlf.removeChild(ncNlf.lastElementChild);return MseEH(ncNlf.parentNode,fkXcC,AMEcs+parseInt(ncNlf.innerText));};var AMEcs=MseEH(KHNOb(KHNOb(KHNOb(fkXcC,xZcWJ),PMxhH),qtcNS),fkXcC,0);fkXcC.parentNode.removeChild(fkXcC);return AMEcs;}(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428,a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29;return {'rf':{'aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4':aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,'a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29':a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,'a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8':a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,'a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428':a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428},'s':'6rrNTyjkfhoyl3rg2FDTf66srNDiG4KC9a2WZxPhIuYibvxvbr9Ol3yvc_ZwJUEeRVYs_gdMA_wM1tWYenL1FxUF2ssilmw9D78EndVw6p8TWep5o9Yf53DZPG4-2l9yE-fvtPZ4er88FC2-8A65GgxuHtwt7b5M0E8_VjW882MzGUUgxWpJ4hUR7SAZs6vsXyriHQxSmQ6rPo3R1oCRBcRK1qSW9uxQYnex5ks-sXskXKyRsFnRLzpp0Jl5PTTsixiGDl0gI7mkMY38IAVTq_5U21QPuqG6hhFto5x-oA0SMV3y0M6tR0pseWolht3SOTL0u20xLA_MWoqd_XsVQgAAAYMOoR5n'};};
var zczpQtGKyj;
try {
zczpQtGKyj = JSON.stringify(CzHMSLRaxHitXCjrMvSI());
} catch (e) {
zczpQtGKyj = "exception " + e;
}
var inputs;
inputs = document.getElementsByName('ui_metrics');
for (var i = 0; i < inputs.length; i++) { inputs[i].value = zczpQtGKyj; }
}
var tiIKkHESFDEdobreOyeY = function() {
document.removeEventListener('DOMContentLoaded', tiIKkHESFDEdobreOyeY);
window.removeEventListener('load', tiIKkHESFDEdobreOyeY);
window.setTimeout(fioDNpGxgmnkgCviIszx);
}
if (document.readyState === 'complete') {
window.setTimeout(fioDNpGxgmnkgCviIszx);
} else {
document.addEventListener('DOMContentLoaded', tiIKkHESFDEdobreOyeY);
window.addEventListener('load', tiIKkHESFDEdobreOyeY);
}
};
yvOyxmAwGvnIARXVXhAk();
And the UI-Metrics look like this:
{"rf":{"aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4":127,"a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29":-18,"a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8":-60,"a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428":-48},"s":"6rrNTyjkfhoyl3rg2FDTf66srNDiG4KC9a2WZxPhIuYibvxvbr9Ol3yvc_ZwJUEeRVYs_gdMA_wM1tWYenL1FxUF2ssilmw9D78EndVw6p8TWep5o9Yf53DZPG4-2l9yE-fvtPZ4er88FC2-8A65GgxuHtwt7b5M0E8_VjW882MzGUUgxWpJ4hUR7SAZs6vsXyriHQxSmQ6rPo3R1oCRBcRK1qSW9uxQYnex5ks-sXskXKyRsFnRLzpp0Jl5PTTsixiGDl0gI7mkMY38IAVTq_5U21QPuqG6hhFto5x-oA0SMV3y0M6tR0pseWolht3SOTL0u20xLA_MWoqd_XsVQgAAAYMOoR5n"}
I made it obtain the text on the account/access?js=1 site and save it to a text file, where I made a function in python that obtains the "ui_metrics"
My code:
ui_metrics = ui_metrics_code.split(f'var {split_ui_metrics};')[0].split('return ')[-1].replace(';','').replace('\n','').split(" ")[0].replace("}}","}")
(where ui_metrics_code is the response text as above)
which returns in:
{'rf':{'d1a4aa70239ad88006075fef748959edb5e520a120c6c2c81d01ab5a85d6d40f':d1a4aa70239ad88006075fef748959edb5e520a120c6c2c81d01ab5a85d6d40f,'adcfa4d4340cd3b32e2d310686e79a56f2825b7eb6c6ce96b322f24423f0847d':adcfa4d4340cd3b32e2d310686e79a56f2825b7eb6c6ce96b322f24423f0847d,'baa9e1c07813efeff769ef29f5ce6864b07dad1bd2c2a472f95e1a9757e5c14c':baa9e1c07813efeff769ef29f5ce6864b07dad1bd2c2a472f95e1a9757e5c14c,'aa71801b588167a6a0e578c9043ce76001f2a66c2543b83081770643da54c04e':aa71801b588167a6a0e578c9043ce76001f2a66c2543b83081770643da54c04e},'s':'au5l9uA05MtyeXy05-64Mca8JuHi-uX7Zj-AhiRRySJa-4oPF-lvFyUSLE7RK8LnZ1w4KjQ-Nnko_cO7_s01h8VorlZcjqDczGw54WZ5UXVPdrHuuM9jmWKwJKZLF-c-GM96fPGPx0jr-S5GatOXfD_awkPI61HDeblfOKGZxqPQkQpTvGpAbcuur2QZr7MRzx5UMgmaZZDYjRqqPgDwWZADV-XBD9csj6lCsdirfNFvkHPQU4SmXwNHn2hZaN-ntfrMIpajcxhBCsX-S2HZpb9F4D6F16JtvVX9giQbm10KRuX3sGCxCy6x02n6p-eIj3f3lvmQxo1Bl23S1A2LZAAAAYMO9BRe'}
as you can see I miss the numbers like :127 and :-18 after the variables.
Im trying to understand where these numbers come from and how I can obtain these so I can get a correct UI-Metrics. Im pretty new in all this so im still trying to understand. Help would be really appreciated!

change text multiple times with a single button and hide the button for the last text

I want to write a basic story where you just click next and the text changes.
I can change the text, but I don't know how to hide the button. Basically I want the onclick method to execute multiple functions, but not all at the same time, rather in a sequence
Code as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="txt" class="txt1">OK, here wo go.</p>
</div>
<button id="btn_next" type="button">Next</button>
<script>
document.getElementById("btn_next").addEventListener("click", toggleText);
function toggleText() {
var textBox = document.getElementById("txt");
switch (textBox.className) {
case "txt1": {
textBox.innerHTML = "This is text 1";
swapClasses(textBox, "txt2");
break;
}
case "txt2": {
textBox.innerHTML = "This is text 2";
break;
}
}
}
function swapClasses(elem, targetClass) {
elem.className = targetClass;
}
</script>
</body>
</html>

If you want to hide the button when the <p> class is txt2, which means the last text is shown, a simple way to do it would be this:
case "txt2": {
textBox.innerHTML = "This is text 2"
document.getElementById("btn_next").style.display = "none";
break;
}
You could also store the button element to a variable const btnEl = document.getElementById("btn_next") so you don't get it twice.

You can hide an element by setting its display to none like:
`nextBtn.style.display = 'none';
However, instead of using a switch statement, you can use an array of text values to drive your story as in the next answer

Another approach to this is shown below.
let counter = 0;
const displayed_text = [
'Input text 1',
'Input text 2',
'Input text 3',
'Input text 4',
];
// Assign DOM elements to variables
const btn_next = document.getElementById("btn_next");
const text_display = document.getElementById("txt");
// Attach listener to button
btn_next.addEventListener("click", toggleText);
function toggleText() {
counter += 1;
if (counter <= displayed_text.length) {
// Update displayed text
text_display.innerHTML = displayed_text[counter -1];
}
if (counter === displayed_text.length) {
// Hide button
btn_next.style.display = 'none';
}
}
The main advantage of this approach is that it makes it easier to go back multiple steps if you want.

var story = [
'OK, here wo go.',
'This is text 1',
'This is text 2',
'This is text 3',
'This is text 4'
];
var nextBtn = document.getElementById("btn_next");
function changeText() {
var textBox = document.getElementById("txt");
var chapter = Number(textBox.dataset.chapter);
if (chapter < story.length - 1) {
textBox.dataset.chapter = chapter + 1;
textBox.innerHTML = story[chapter + 1];
if ((story.length - chapter) <= 2 ) {
nextBtn.style.display = 'none';
}
}
}
nextBtn.addEventListener("click", changeText);
<div id="div1">
<p id="txt" class="txt1" data-chapter="0">OK, here wo go.</p>
</div>
<button id="btn_next" type="button">Next</button>

For cases like this, it can be beneficial to store the content in an array of objects (or fetch the content as JSON etc). Then, when the event handler is fired, it can simply increment (or decrement if you wish to have forward/backward) and determine whether the button should be visible or hidden. That appears to be the direction you're heading with the above code.
Example function:
function navigatePage(el){
// Control the navigation by only allowing increment within range
if (el != null){
switch (el.target.getAttribute("id")){
case "btn_next":
if (curr_page < story.length){
curr_page++;
}
break;
case "btn_prev":
if (curr_page > 1){
curr_page--;
}
break;
default: break;
}
}
// Set the title and text to the current page contents
// Arrays are zero-indexed, so "1" is actually "0", and so on
story_title.innerHTML = story[curr_page - 1].title;
story_content.innerHTML = story[curr_page - 1].text;
// Show or hide nav buttons based on the current page
// The following syntax is basically just a fancy "if-then" done in one line
btn_prev.style.display = (curr_page > 1 ? "inline-block" : "none");
btn_next.style.display = (curr_page < story.length ? "inline-block" : "none");
// Update the page count element
page_count.innerHTML = "Page " + curr_page + " of " + story.length;
// document.getElementById("storycontent").innerHTML = curr_page + " - " + story.length;
}
Here is a working fiddle to demonstrate how it all works together:
https://jsfiddle.net/s0toz3L8/1/

Cannot get if-statement to work within function

I'm a complete JS noob who set off on a mission to create a quiz as a first/second-ish project. I suppose there are better ways to do this than the way I'm doing it, but currently I, after a correct submission of the user, want to remove the current iteration from the array which is converted into text through innerHTML, and do the same for the correct answer/explanation. This works well, up until the last bit. After the user completes the last question, it again removes the data from the array, showing "UNDEFINED" in the screen. I figured that, by adding an if statement to see if array.length > 1, I could circumvent this. I tried avoiding this by having a different if statement return true or false and then using && on the function; to no avail. Any and all if statements here give me the errors:
Uncaught ReferenceError: nextQuestion is not defined
at submitAnswer (VM588 script.js:61)
at HTMLButtonElement.onclick (quizpage.html:19)
I've attached the html and JS underneath.
var questionsOverview = ["1 - 1+1 = ?", "2 - What food do dieters tend to avoid?", "3 - Best fast food chain?"];
var answersOverview = ["[A] 1 [B] 3 [C] 2", "[A] Protein [B] Carbs [C] Glucose", "[A] Burger King [B] KFC [C] McDonalds"];
var answersLetter = ["C", "B", "C"];
var score = 0;
var answerUser = "test"
var currentQuestion = questionsOverview[0];
//set buttons as answersLetter
function setRed() {
document.getElementById(answerUser).style.background = "red";
}
function pressedA() {
answerUser = "A";
setRed();
document.getElementById("B").style.background = "";
document.getElementById("C").style.background = "";
};
function pressedB() {
answerUser = "B";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("C").style.background = "";
};
function pressedC() {
answerUser = "C";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("B").style.background = "";
};
//preps the first question/answer
function changeQuestion() {
document.getElementById("question").innerHTML = questionsOverview[0];
document.getElementById("answer").innerHTML = answersOverview[0];
};
//move to the next question
checkForEnd() && function nextQuestion() {
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};
// submit user answer
function submitAnswer() {
var audio = document.getElementById("tleeni");
audio.play();
if(answerUser === answersLetter[0]) {
alert("Correct! You're smart!");
nextQuestion();
}
else {
alert("Too bad!");
}
};
function checkForEnd() {
if (answersOverview.length > 1) {
return true;
} else {
return false;
}
};
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body onload="changeQuestion()">
<div class="top-header" id="header">
<font color="white">Quiz</font></div>
<div class="main-content" id="main-content">
<h2 id="question">1</h2>
<h3 id="answer">2</h3>
<h4 id="score>">scorefiller</h4>
<div id="buttons">
<button onClick="pressedA()" class="answers" id="A">A</button>
<button onClick="pressedB()" class="answers" id="B">B</button>
<button onClick="pressedC()" class="answers" id="C">C</button>
</div>
<button onClick="submitAnswer()" id="submit">Submit answer!</button>
</div>
<audio id="tleeni" src="submit.mp3"></audio>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Pacifico');
</style>
Given that I'm really new to programming I'd appreciate any and all feedback. Thank you very much in advance!

I think your issue might be here
//move to the next question
checkForEnd() && function nextQuestion() {
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};
You're not actually calling the function nextQuestion; you're only making a boolean check that is equivalent to checkForEnd() && true since a function is a truthy value.
The function declaration is also "lost" hence why you're getting that reference error.
true && function burrito() {
return '🌯';
}
burrito();
// VM1158:1 Uncaught ReferenceError: burrito is not defined

checkForEnd() && function nextQuestion() {}
This doesn't run each time you click the button, nor does it run each time nextQuestion() is called. It does it once, whenever the code is first loaded. Even if it did all it would be doing is creating a named function expression, which is not useable outside the function itself, ie you can't call nextQuestion().
What you want is to use checkForEnd() inside the function and return based on that
function nextQuestion() {
if(!checkForEnd()) return;
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};

Looping through array using a button

Ok, in essence I want to create a short quiz that has a next and previous button. I want to loop through two arrays, questions and choices, and have a score at the end. I have read chapters on the DOM and Events and it is just not clicking apparently.
Really I need a little bit of code that shows a concrete example of how to manipulate the DOM. What I have so far are only the arrays, and a function declaring that x is in fact getting my element by id. haha.
Sorry I don't have more code to give. I tried to attach the id to a paragraph, and then get it by it's id and document.write the array, but that replaces the button. If you run the code below you'll see what I'm saying.
<!DOCTYPE html>
<html>
<head>
<title>Bom</title>
</head>
<body>
<input type="button" value="Iterate" id="myButton" onclick="iter_onclick()">
<p id="qArray">Some Text</p>
<script>
var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];
var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]];
function iter_onclick () {
var x = document.getElementById("qArray");
document.write("Hello World");
}
</script>
</body>
</html>`
Like I said, this is my first attempt at truly manipulating the DOM, and I know what I want to do. I just don't know how to do it. I am understanding all the syntax and events and objects and such. But, I'm not really sure how to apply it. Also, no Jquery. I want to know how to create applications with Javascript and then work my way into Jquery. Thanks people.

This will loop through your questions, hope this helps you to proceed.
var qArray = ["Who is my dog?",
"who is the prez?",
"Who is my girlfriend?",
"Who am I?"];
var cArray = [
["Bill", "Billy", "Arnold", "Tyler"],
["Oz", " Buffon", "Tupac", "Amy"],
["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"],
["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"]
];
var index = 0;
function iter_onclick() {
//if this is the last question hide and displays quiz ends
if (index >= qArray.length) {
document.getElementById('qArray').innerHTML = '<div>Quiz End, Thank you</div>'
document.getElementById('myButton').style.visibility = 'hidden ';
return false;
}
var html = ' <div> ' + qArray[index] + ' </div> <div>';
for (var i = 0; i < cArray[index].length; i++) {
html += '<label><input type="radio" name="ans" value="'
+ cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>';
}
html += '</div > ';
document.getElementById('qArray').innerHTML = html;
index++;
}

Here's a very basic example you can work from. This modifies the existing DOM items. You cannot use document.write() on a document that is already loaded or it will clear everything you have and start over and it's not the most efficient way to put content into the DOM.
This example has a number of fields on the page, it loads a question and then checks the answer when you press the next button.
HTML:
<div id="question"></div>
<input id="answer" type="text"><br><br>
<button id="next">Next</button> <br><br><br>
Number Correct So Far: <span id="numCorrect">0</span>
Javascript (in script tag):
var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];
var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]];
var questionNum = -1;
var numCorrect = 0;
function loadQuestion() {
++questionNum;
if (questionNum >= qArray.length) {
alert("all questions are done");
} else {
document.getElementById("question").innerHTML = qArray[questionNum];
document.getElementById("answer").value = "";
}
}
loadQuestion();
function checkAnswer() {
var answer = document.getElementById("answer").value.toLowerCase();
var allowedAnswers = cArray[questionNum];
for (var i = 0; i < allowedAnswers.length; i++) {
if (allowedAnswers[i].toLowerCase() == answer) {
return true;
}
}
return false;
}
document.getElementById("next").addEventListener("click", function(e) {
if (checkAnswer()) {
++numCorrect;
document.getElementById("numCorrect").innerHTML = numCorrect;
loadQuestion();
} else {
alert("Answer is not correct");
}
});
Working demo: http://jsfiddle.net/jfriend00/gX2Rm/

Explanation of this JavaScript Code

I'm not too good on the whole JavaScript (I can do some basic validations) but this isn't my zone
I've got a piece of code below that I'm trying to understand what it does, I can read any code and understand a few parts, but this just stumped me.
Here:
function tm_search_click() {
if (document.getElementById('tm').value == 'Enter your trademark') {
document.getElementById('tm').style.backgroundColor = '#fcc';
return false;
} else {
window.location = '?tm=' + escape(document.getElementById('tm').value);
return true;
}
}
function qs(a) {
a = a.replace(/[[]/, "\[").replace(/[]]/, "\]");
var b = "[\?&]" + a + "=([^&#]*)";
var c = new RegExp(b);
var d = c.exec(window.location.href);
return d == null ? "" : decodeURIComponent(d[1]).replace(/+/g, " ")
}
if (qs("tm") != "") {
tm_trademark = document.getElementById("tm").value = unescape(qs("tm"));
tm_partner = "migu2008";
tm_frame_width = 630;
tm_frame_height = "auto";
tm_trademark_country_code = "GB";
tm_css_url = "http://remarqueble.com/api/theme/search_corporate.css";
document.getElementById("tmLoading").style.display = "block";
tm_on_search_result = function () {
document.getElementById("tmLoading").style.display = "none";
document.getElementById("tmLoaded").style.display = "block"
}
} else {
tm_search_method = "none"
}
That is all of it without the <script> tags.
Could I also edit this code so that it searches are made based on what option the user inputs?

I think it works like this (assuming that this is in tags inside html page)
Page loads.
The script checks if URL has 'tm' parameter. If it has, then it sets bunch of tm_.. parameters and callback function. I don't know how they are used.
User clicks something that triggers the tm_search_click
Script sets new URL for the page and browser starts loading that
Goto step 1.