Actualmente tengo una "sección de prueba" para mi página web. En la parte inferior de la información sobre la lección hay un cuestionario.
Actualmente he podido mostrar/ocultar texto estándar. Pero quiero saber mostrar un bloque de código cuando hago clic en "Mostrar solución". He intentado cambiar los nombres de las clases, pero parece que no puedo hacerlo bien.
function show_hide(element) { var myAnswer = element.nextElementSibling; var displaySetting = myAnswer.style.display; var quizButton = element; if(displaySetting=="inline-block"){ myAnswer.style.display = 'none'; quizButton.innerHTML = 'Show Solution'; } else { myAnswer.style.display = 'inline-block'; quizButton.innerHTML = 'Hide Solution'; } } .quiz-question{ margin-bottom: 10px; text-align: left; font-size: 15px; color: #f44336; font-weight: 400; } .quiz-button{ display: inline-block; text-decoration: none; color: #111; border: 1px solid #f44336; padding: 5px 5px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .quiz-button:hover{ color: #fff; background: #f44336; transition: 0.5s; } #answer{ display: none; } <head> <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script> </head> <body> <!-- Working Code --> <h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <p id="answer"> <b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value. </p> <br><br><hr> <!-- Not Working Code --> <h4>C - Question</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <p id="answer"> <pre> <code class="language-cpp line-numbers"> 2 //2 is a literal that evaluates to value 2 "Hello World!" //"Hello World!" is a literal that evaluates to text "Hello" </code> </pre> </p> </body>Tienes varios errores en este código:
id debe ser una class uso única en su lugar.<div> para contener <pre> en lugar de <p> function show_hide(element) { const myAnswer = element.nextElementSibling; const displaySetting = myAnswer.style.display; if (displaySetting === "inline-block") { myAnswer.style.display = 'none'; element.innerHTML = 'Show Solution'; } else { myAnswer.style.display = 'inline-block'; element.innerHTML = 'Hide Solution'; } } .quiz-question { margin-bottom: 10px; text-align: left; font-size: 15px; color: #f44336; font-weight: 400; } .quiz-button { display: inline-block; text-decoration: none; color: #111; border: 1px solid #f44336; padding: 5px 5px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .quiz-button:hover { color: #fff; background: #f44336; transition: 0.5s; } .answer { display: none; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script> <!-- Working Code --> <h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <p class="answer"> <b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value. </p> <br><br> <hr> <h4>C - Question</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <div class='answer'> <pre> <code class="language-cpp line-numbers"> 2 //2 is a literal that evaluates to value 2 "Hello World!" //"Hello World!" is a literal that evaluates to text "Hello" </code> </pre> </div>Puedes usar la biblioteca embellecer
function show_hide(element) { var myAnswer = element.nextElementSibling var displaySetting = myAnswer.style.display; var quizButton = element; if(displaySetting=="inline-block"){ myAnswer.style.display = 'none'; quizButton.innerHTML = 'Show Solution'; } else { myAnswer.style.display = 'inline-block'; quizButton.innerHTML = 'Hide Solution'; } } .quiz-question{ margin-bottom: 10px; text-align: left; font-size: 15px; color: #f44336; font-weight: 400; } .quiz-button{ display: inline-block; text-decoration: none; color: #111; border: 1px solid #f44336; padding: 5px 5px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .quiz-button:hover{ color: #fff; background: #f44336; transition: 0.5s; } #answer{ display: none; } code { padding: 2px 4px; color: #000000; background-color: #eeeeee; border-radius: 3px; } <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha512-PW9BfYtoXV6XYb/4FTkBoJEBM92TrGk7N324cCmF5i2dY02YvBg6ZPEAnSOZ5i2/nGPbsYFQwVzDxVVoWEKWww==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha512-/9uQgrROuVyGVQMh4f61rF2MTLjDVN+tFGn20kq66J+kTZu/q83X8oJ6i4I9MCl3psbB5ByQfIwtZcHDHc2ngQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head> <body onload="prettyPrint()"> <!-- Working Code --> <h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <p id="answer"> <b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value. </p> <br><br><hr> <!-- Not Working Code --> <h4>C - Question</h4> <button onclick="show_hide(this)" class="quiz-button">Show Solution</button> <p id="answer"> <code class="language-cpp prettyprint line-numbers"> 2 //2 is a literal that evaluates to value 2 "Hello World!" //"Hello World!" is a literal that evaluates to text "Hello" </code> </p> </body>