For some reason BoostOdds.js has stopped loading for my html, jQuery code in same file, BoostOdds.js, is working so I'm completely lost, how is that even possible?
Look to the Toggle all Button to see if jQuery is working and all other buttons to see if JS is working.
Index.html
&
BoostOdds.js
Are in the same directory. Here's the code, thanks for the help:
function oneElmToggle(elm) {
const display = elm.nextSibling.style.display;
if (display === "none" || display === "") {
elm.nextSibling.style.display = "block";
}
else {
elm.nextSibling.style.display = "none";
}
}
window.onload = function () {
$("#toggleAllElms").click(function () {
$(".toggleAcronym").toggle('fast');
});
};* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
#REDTEXT, .REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250,220,255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0,0,0);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT /* Choose Meta Principle Title */ {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC /* Choose Meta Principle Container*/ {
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC /* Meta Principle Choice*/ {
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
}
.MP /* Meta Principle */ {
width: 60%;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C { /*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
} <!DOCTYPE HTML5><html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="../../css/BoostOdds.css">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>
<body>
<header>
<h1 id="IPT"> <!-- Intellectual Principles Title-->
Intellectual Principles
</h1>
</header>
<h2 class="CMPT">Choose Meta-Principle</h2> <!-- Choose Meta Principle Title -->
<ul class="CMPC"> <!-- Choose Meta Principle Container -->
<a href="#p11"><li class="MPC"> <!-- Meta Principle Choice -->
Boost your odds of success through de-centralized principle-guided decision-making.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Learn, Grow, Evolve. Be Anti-Fragile.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Apply principles in complex sub-systems of reality.
</li></a>
</ul>
<h2 class="MP" id="p11"> <!-- Meta Principle -->
Boost your odds of success through de-centralized principle-guided decision-making.
</h2>
<h2 class="CSP"> <!-- Choose Sub Principle -->
Choose Sub-Principle
</h2>
<div class="CSPFC"> <!-- Choose Sub Principle Flex Container-->
<a class="SPC" href="#p111"> <!-- Sub Principle Choice -->
Find out what reality looks like through <i>The Scientific Method</i><!-- Link to other doc--> & phenomenology of consciousness.
</a>
<a class="SPC" href="#p112"> <!-- Sub Principle Choice -->
<i>Find your meaning/Why What do you want reality to be like?</i><!-- Link to other doc-->
</a>
<a class="SPC" href="#p113"> <!-- Sub Principle Choice -->
Write down principles for making decisions in future realities.
</a>
<a class="SPC" href="#p114"> <!-- Sub Principle Choice -->
Turn principles into algorithms.</a>
<a class="SPC" href="#p115"> <!-- Sub Principle Choice -->
Incrementally RUD principles for 4 AoL.
</a>
<a class="SPC" href="#p116"> <!-- Sub Principle Choice -->
Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i>
</a>
</div>
<h3 class="SP" id="p111"> <!-- Sub Principle -->
Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.
</h3>
<h3 class="SP" id="p112"> <!-- Sub Principle -->
<a>Find your meaning/Why</a> <i>What do you want reality to be like?</i>
</h3>
<h3 class="SP" id="p113"> <!-- Sub Principle -->
Write down principles for making decisions in future realities.
</h3>
<div class="C"> <!-- Container -->
<h4 class="pv2" id="p1131">Meta-principles make sub-principles obsolete.</h4>
<h4 class="pv2" id="p11311">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</h4>
<h4 class="pv2" id="p11312">Delay decisions AMA(subj.)P.</h4>
<h4 class="pv2" id="p11313">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</h4>
<h4 class="pv2" id="p11314">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</h4>
</div>
<div class="p" id="p1132">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of fully being.</div>
<div class="p" id="p1133">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
<div class="p" id="p1134">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>
<div class="C C3C"> <!-- Container 3 Columns -->
<h4 class="pv2" id="p1135">Use markers, colors and distinguishers. //To communicate with your future self.</h4>
<h4 class="pv2" id="p11351"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</h4>
<h4 class="pv2" id="p11352"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</h4>
<h4 class="pv2" id="p11353"><span id="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done w/principle.</h4>
</div>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms"> <!-- First jQuery/JS -->
<button onclick="oneElmToggle(this)">RWE</button>
<p class="toggleAcronym">Real World Example</p>
<button onclick="oneElmToggle(this)">CRUD</button>
<p class="toggleAcronym">Create, Read, Update, Delete</p>
<button onclick="oneElmToggle(this)">CNS</button>
<p class="toggleAcronym">Central Nervous System</p>
<button onclick="oneElmToggle(this)">MPS</button>
<p class="toggleAcronym">Muscle Protein Synthesis</p>
<button onclick="oneElmToggle(this)">I.e.</button>
<p class="toggleAcronym">In essence</p>
<button onclick="oneElmToggle(this)">ALAP</button>
<p class="toggleAcronym">As Long As Possible</p>
<button onclick="oneElmToggle(this)">AMAP</button>
<p class="toggleAcronym">As Much As Possible</p>
<button onclick="oneElmToggle(this)">CoC</button>
<p class="toggleAcronym">Contents of Consciousness</p>
<button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
<p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
<button onclick="oneElmToggle(this)">AoL</button>
<p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>
<button onclick="oneElmToggle(this)">MBS</button>
<p class="toggleAcronym">Mind Body & Spirit</p>
<button onclick="oneElmToggle(this)">QoC</button>
<p class="toggleAcronym">Quality of Consciousness</p>
<button onclick="oneElmToggle(this)">PFC</button>
<p class="toggleAcronym">Pre-Frontal Cortex</p>
<button onclick="oneElmToggle(this)">SRV</button>
<p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
<button onclick="oneElmToggle(this)">P/T-R</button>
<p class="toggleAcronym">Practice/Theory-Ratio</p>
<button id="toggleAllElms"><h2>Toggle All</h2></button>
<p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>
<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->
<div class="C C3C">
<h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
<h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
<h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
<h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>
<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<a href=""><div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div></a>
<footer>
</footer>
</body>
</html>I can see that the jQuery is not working in this snippet, but it's working in my project so my main question is how to make JS work in my project too. Thanks.
UPDATE: Folder structure:
CODE //Project folder
- css
- node_modules
- jQuery npm (Pseudo for loads of folders and files)
- Principles
- IntPrin
- BoostOdds.js
- index.html
- scss
- index.js //Main/Starting, server is set up here
- package.json
- package-lock.json
