JS文件未在html中加載

Question

由於某些原因， BoostOdds.js已停止在同一文件BoostOdds.js為我的html，jQuery代碼加載代碼，因此我完全迷失了，那怎么可能？

查看“切換所有按鈕”以查看jQuery是否正常工作，以及其他所有按鈕以查看JS是否正常工作。

Index.html 

＆

BoostOdds.js

在同一個目錄中。 這是代碼，感謝您的幫助：

 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)">Ie</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/TR</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> 

我可以看到jQuery在此代碼段中不起作用，但在我的項目中起作用，所以我的主要問題是如何使JS在我的項目中也起作用。 謝謝。

更新：文件夾結構：

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

Answer 1

jQuery正在運行，但無法正常運行ElmToggle那么，為什么要為此功能使用vanila JS？ 使用jQuery方法。 它緊湊而簡單：

 // there is no need for inline onclick="oneElmToggle(this)" on every button // and inline JS in no-no $("#p1136Acronyms > button:not(#toggleAllElms)").click(oneElmToggle) // all buttons exept one with id="toggleAllElms" function oneElmToggle() { $(this).next().toggle('fast') // nextSibling } 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); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div> <div id="p1136Acronyms"> <!-- First jQuery/JS --> <button>RWE</button> <p class="toggleAcronym">Real World Example</p> <button>CRUD</button> <p class="toggleAcronym">Create, Read, Update, Delete</p> <button>CNS</button> <p class="toggleAcronym">Central Nervous System</p> <button>MPS</button> <p class="toggleAcronym">Muscle Protein Synthesis</p> <button>Ie</button> <p class="toggleAcronym">In essence</p> <button>ALAP</button> <p class="toggleAcronym">As Long As Possible</p> <button>AMAP</button> <p class="toggleAcronym">As Much As Possible</p> <button>CoC</button> <p class="toggleAcronym">Contents of Consciousness</p> <button>RR(P)(F)-R</button> <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p> <button>AoL</button> <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p> <button>MBS</button> <p class="toggleAcronym">Mind Body & Spirit</p> <button>QoC</button> <p class="toggleAcronym">Quality of Consciousness</p> <button>PFC</button> <p class="toggleAcronym">Pre-Frontal Cortex</p> <button>SRV</button> <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p> <button>P/TR</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> 

為什么內聯JS是不好的做法 。

開發人員控制台是您的朋友。 如果不起作用，請檢查控制台。 在您的代碼段中，除了錯誤（缺少jquery鏈接）外，還有一個錯誤： Cannot read property 'display' of undefined 。 nextSibling不是您想要的。 下一個元素兄弟將是它。 node.nextSibling和ChildNode.nextElementSibling有什么區別

 function oneElmToggle(elm) { const sibling = elm.nextElementSibling; if (!sibling.style.display) { // there is no "style.display" by default so we toggle to "block" because in css we have "none" sibling.style.display = "block"; } else { if (sibling.style.display === "none") { sibling.style.display = "block"; } else { sibling.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); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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)">Ie</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/TR</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>