why? - PHP Online
Form of PHP Sandbox
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php
in the places where the PHP script should be executed.
Result of php executing
Full code of why?.php
- <button onclick="copyTemplate()">Copy Template</button>
- <script>
- var pageNumber = 1;
- var screenNumber = 1;
- function copyTemplate() {
- // Get the template element (which contains the table and associated elements and functions)
- var template = document.getElementById("template");
- // Clone the template element and its contents
- var copiedTemplate = template.cloneNode(true);
- // Give the cloned template element a unique id
- copiedTemplate.id = "copiedTemplate";
- // Clear the user input fields in the copied template
- // Only clear the fillable and content editable fields, not the orange bar field
- var inputElements = copiedTemplate.querySelectorAll(".field");
- var contentEditable = copiedTemplate.querySelector("#contenteditable");
- for (var i = 0; i < inputElements.length; i++) {
- inputElements[i].value = "";
- }
- contentEditable.innerHTML = "";
- // Auto-fill the page and screen number fields in the copied template
- var pageNumberField = copiedTemplate.querySelector("#pageNumberField");
- var screenNumberField = copiedTemplate.querySelector("#screenNumberField");
- pageNumberField.value = pageNumber;
- screenNumberField.value = screenNumber;
- pageNumber++;
- screenNumber++;
- // Append the cloned template element to the document body
- document.body.appendChild(copiedTemplate);
- // Get the table element from the copied template
- var table = copiedTemplate.querySelector("table");
- // Give the table a unique id
- table.id = "copiedTable";
- /*
- // Create a new element to hold the "add row" button and its associated function
- var addRowButtonContainer = document.createElement("div");
- // Add the "add row" button to the container element
- var addRowButton = document.createElement("button");
- addRowButton.innerHTML = "Add Row";
- addRowButton.onclick = function() {
- // Add a new row to the table
- var row = document.getElementById("copiedTable").insertRow(-1);
- var cell1 = row.insertCell(0);
- var cell2 = row.insertCell(1);
- var cell3 = row.insertCell(2);
- cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
- cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
- cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
- }
- // Append the button to the container element
- addRowButtonContainer.appendChild(addRowButton);
- // Create a new element to hold the "toggle table" button and its associated function
- var toggleTableButtonContainer = document.createElement("div");
- // Add the "toggle table" button to the container element
- var toggleTableButton = document.createElement("button");
- toggleTableButton.innerHTML = "Toggle Table";
- toggleTableButton.onclick = function() {
- // Toggle the display style of the table
- var table = document.getElementById("copiedTable");
- if (table.style.display === "none") {
- table.style.display = "table";
- } else {
- table.style.display = "none";
- }
- }
- // Append the button to the container element
- toggleTableButtonContainer.appendChild(toggleTableButton);
- // Append the button container elements to the copied template element
- copiedTemplate.appendChild(addRowButtonContainer);
- copiedTemplate.appendChild(toggleTableButtonContainer);
- */
- }
- </script>
- <div id="template">
- </script>
- <style>
- table {
- width: 70%;
- }
- </style>
- <table id="table1">
- <tr style="background-color: gray;">
- <td>Page <input type="number"></td>
- <td>Screen <input type="number"></td>
- </tr>
- <tr style="background-color: orange;">
- <td colspan="2"><input type="text" style="width: 500px;">
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <div id="contenteditable" contenteditable=""></div>
- </td>
- </tr>
- <tr>
- <td colspan="2" style="text-align: center;">Select Navigate to Continue</td>
- </tr>
- <tr style="background-color: gray;">
- <td colspan="2" style="text-align: center;">Navigation Bar</td>
- </tr>
- <table id="myTable" style="table-layout: fixed; resize: both;">
- <tbody>
- <tr style="background-color: gray;">
- <th style="width: 430px">Filename</th>
- <th style="width: 430px">Graphic Description</th>
- <th style="width: 430px">Alt Text/Title Tag</th>
- </tr>
- <tr>
- <td><input class="field" type="text" placeholder="Enter Filename" style="width: 430px"></td>
- <td><input class="field" type="text" placeholder="Enter Graphic Description" style="width: 430px"></td>
- <td><input class="field" type="text" placeholder="Enter Alt Text/Title Tag" style="width: 430px"></td>
- </tr>
- <button onclick="addRow(this)">Add Row</button>
- <button onclick="toggleTable(this)">Toggle Table</button>
- </tbody>
- <script>
- function addRow(e) {
- var table = e.parentNode.querySelector("#myTable");
- console.log(table);
- var row = table.insertRow(-1); // Insert a new row at the end of the table
- var cell1 = row.insertCell(0);
- var cell2 = row.insertCell(1);
- var cell3 = row.insertCell(2);
- cell1.innerHTML = "<input class='field' type='text' placeholder='Enter Filename' style='width: 430px'>";
- cell2.innerHTML = "<input class='field' type='text' placeholder='Enter Graphic Description' style='width: 430px'>";
- cell3.innerHTML = "<input class='field' type='text' placeholder='Enter Alt Text/Title Tag' style='width: 430px'>";
- }
- function toggleTable(e) {
- var fields = document.getElementsByClassName("field");
- var table = e.parentNode.querySelector("#myTable");
- console.log(table);
- // If the table is collapsed, expand it
- if (table.open === false) {
- for (var i = 0; i < fields.length; i++) {
- fields[i].style.display = "block";
- }
- table.open = true;
- } else {
- // Otherwise, collapse it
- for (var i = 0; i < fields.length; i++) {
- fields[i].style.display = "none";
- }
- table.open = false;
- }
- }
- </script>
- <table id="table3">
- <tbody>
- <tr style="background-color: gray;">
- <td>Programming</td>
- </tr>
- <tr>
- <td colspan="2"><textarea style="width:100%; height:100%;"></textarea></td>
- </tr>
- <table id="table4">
- <tbody>
- <tr style="background-color: lightblue;">
- <th>Narrated Text</th>
- <th>Graphics</th>
- </tr>
- <tr>
- <td style="width: 50%;">
- <div contenteditable="true" class="editable-area"></div>
- </td>
- <td style="width: 20%;">
- <div contenteditable="true" class="editable-area"></div>
- </td>
- </tr>
- <style>
- .editable-area {
- white-space: pre-line;
- overflow-wrap: break-word;
- min-height: 100px;
- max-height: 100px;
- resize: vertical;
- }
- </style>
- </tbody>
- </table>
- </div>