在我将它们合并到其他 Javascript 之前,innerHTML 示例运行良好

Posted

技术标签:

【中文标题】在我将它们合并到其他 Javascript 之前,innerHTML 示例运行良好【英文标题】:innerHTML examples work well until I incorporate them into other Javascript 【发布时间】:2017-11-16 04:47:37 【问题描述】:

我成功尝试了 W3Schools 使用 innerhtml 的示例,例如https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements 我的目标是在我调用“onclick”时从 javascript 代码读取和写入表单控件显示的值。

但是,当我只是在现有 php 脚本的适当位置放置一个示例时,当我单击“试用”按钮时,网页上什么也没有出现。当然,现有代码有自己的形式、其他 Javascript 函数和对 $_POST 值的引用。

这是我的 PHP 脚本的摘录,包括示例“唐老鸭”代码。请注意,myFunction() 和 myFunction2() 在调用时都不会产生任何屏幕变化。也没有使用 document.write(x) 的版本

</style>

<script type="text/javascript">
...

function myFunction() 
    var x = document.getElementById("rmOne");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) 
        txt = txt + x.elements[i].value + "<br>";
    
    document.getElementById("demo").innerHTML = txt;


function myFunction2() 
  $_POST.forEach(output)


function output(element, index, array) 
  document.write(index + element + "<br>")

</script>

</head>
<body>


<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname" id="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Try it" button to display the value of the first element in the form.</p>

<button onclick="myFunction2()">Try it</button>

<p id="demo"></p>

<?php

require_once "config.azsb.php";
require_once "functionsarrays.azsb.php";

if ( isset( $_POST["roomSel"] ) )
  $room = $_POST["roomSel"];

提前致谢!

【问题讨论】:

等等,你想在 javascript 中访问一个 php 变量?请看the differences between client and server side programming。 【参考方案1】:

您无法在 JavaScript 中访问 PHP 变量,因为 JavaScript get 在客户端执行,而 PHP get 在服务器上执行。

但是,您可以将 PHP 变量打印到 JavaScript 中,类似于:

var myVar = <?php echo $yourPhpVariable; ?>;

【讨论】:

这很聪明!谢谢。在“Donald Duck”示例(来自 W3schools)中,数据在 JavaScript 变量和表单控件值属性之间进行双向交换 ShuntHacks 的回答让我思考。再次感谢。当调用 innerHTML 属性时(在 W3Schools 示例中)。有多少网页从服务器重新发送到浏览器?刷新整个页面,还是只刷新文档对象的新部分?【参考方案2】:

超时。我试图在网页上打开两个表单。更改为仅一个更改了响应的性质。现在,尝试点击尝试错误地转到“操作”链接(后续网页)(它还不存在,也不是针对该点击的。请继续关注。

【讨论】:

【参考方案3】:

更接近了,但还没有,尽管有一些建议。 JavaScript myFunction(),被称为“onclick”仍然对显示的页面没有影响(正如最初引用的示例:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements)。我修改了我的 php 代码使其自行运行(没有 $_POST 依赖项,也没有 mysql 访问权限——所有这些数据都是内部定义的),以便任何人都可以运行它,所以请尝试。

<html>
<head>
<title>AZ Science Bowl  --  Scorekeeper in Competition Rooms</title>
<style type="text/css">
<!--
.cenx text-align: center;
.wfd width: 100%
img padding: 24pt;
body background-color: #aacc44; padding: 2%; font-family: Arial, sans-serif;
-->
table, th, td 
    border: 1px solid black;
    border-collapse: collapse;

</style>

<script type="text/javascript">

function leftPenalty()
alert("leftPenalty");
var oFormObject = document.forms['rmOne'];
alert('value=' + oFormObject.elements["LeftPenalty"]);
if ( oFormObject.elements["LeftPenalty"] == "4" ) 
  oFormObject.elements("LeftPenalty").value = "";
else
  oFormObject.elements("LeftPenalty").value = "4";



function leftToss()
alert("leftToss");
alert('value=' + document.elements["LeftToss"]);
if ( document.elements["LeftToss"] == "4" ) 
  document.getElementById("LeftToss").innerHTML = "";
else
  document.getElementById("LeftToss").innerHTML = "4";


function leftBonus()
alert("leftBonus");
var x = document.getElementById("mOne").elements[5].value;
alert('value=' + x);
if ( document.elements["LeftBonus"] == "10" ) 
  document.getElementById("LeftBonus").innerHTML = "";
else
  document.getElementById("LeftBonus").innerHTML = "10";




function myFunction() 
    var x = document.getElementById("rmOne");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) 
        txt = txt + x.elements[i].value + "<br>";
    
    document.getElementById("demo").innerHTML = txt;


function myFunction2() 
  <?php
  foreach($_POST as $index => $element):
  ?>
  output(<?= $index ?>, '<?= $element ?>');
  <?php endforeach; ?>


function output(element, index, array) 
  document.write(index + element + "<br>")

</script>

</head>
<body>



<?php

//require_once "config.azsb.php";
//require_once "functionsarrays.azsb.php";

$NUM_ROUND_EVENTS=7;
$NUM_WAVE_FILES=17;
$MAX_ROOMS=9;
$NUM_ROOM_SCORES_COLS=12;
$MAX_ROUNDS=16;
$NUM_QUESTIONS_PER_ROUND_MAX=25;
$ROOM_SCORES_SKEL="Rm####Scores";

$room = 'Badd';
$round = 'RR1';
$quesNum = '05';

//echo 'Rm, Rnd, Ques = ' . $room . ', ' . $round . ', ' . $quesNum;

//Define an array of printed column names
$scoresTitlesPrinted = array ('Ques #','Penalty','TossUp','Bonus','Sum','Total','Penalty','TossUp','Bonus','Sum','Total');
//Define a sub array to hold the name of each column of DB Table Rm####Scores
$scoresCols =           array ("RR_DE_PK1",    "QuesNumPK2",   "LeftPenalty",   "LeftToss",   "LeftBonus",   "LeftQuesSum",   "LeftRunTot",   "RightPenalty",    "RightToss",   "RightBonus",   "RightQuesSum",   "RightRunTot");
//Define an internal array to hold all values for a given Room and Round Scores
$scoresArray = array (
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>1,"LeftPenalty"=>0,"LeftToss"=>1,"LeftBonus"=>0,"LeftQuesSum"=>1,"LeftRunTot"=>1,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>2,"LeftPenalty"=>4,"LeftToss"=>2,"LeftBonus"=>0,"LeftQuesSum"=>6,"LeftRunTot"=>7,"RightPenalty"=>0, "RightToss"=>4,"RightBonus"=>0,"RightQuesSum"=>4,"RightRunTot"=>4),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>3,"LeftPenalty"=>4,"LeftToss"=>3,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>4,"RightBonus"=>10,"RightQuesSum"=>14,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>4,"LeftPenalty"=>0,"LeftToss"=>4,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>5,"LeftPenalty"=>0,"LeftToss"=>5,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0)
                     );

$namesRow = array( "LeftTeamLetter"=>"B", "LeftTeamName"=>"Team L in 0203", "RightTeamLetter"=>"D", "RightTeamName"=>"Team R in 0203"   );


//Create a string of $count 'non-break html spaces' (where $count is between 0 and 100)
function htmlSpaces ($count) 
  $strSp = '';
  if ($count > 0 && $count <=100)
    for ($idx=0; $idx<$count; $idx++)
      $strSp .= '&nbsp;';
  return $strSp;


/*

//Build a MySQL Table name (Rm####Scores) from a 4-digit-left-0-filled room number of 4-char room name
function roomScoresTableName ($room) 
  return substr_replace ("Rm####Scores", $room, 2, -6);


//Build SQL Query string for Team Scores from table Rm####Scores
function buildSQLstringScores ($room, $round, $quesNum) 
  return 'SELECT RR_DE_PK1, QuesNumPK2, LeftPenalty, LeftToss, LeftBonus, (LeftPenalty+LeftToss+LeftBonus) as LeftQuesSum, 0 as LeftRunTot, RightPenalty, RightToss, RightBonus, (RightPenalty+RightToss+RightBonus) as RightQuesSum, 0 as RightRunTot from ' . roomScoresTableName($room) . ' where RR_DE_PK1 = "' . $round . '" and QuesNumPK2<=' . sprintf('%02u',$quesNum) . ' order by QuesNumPK2 limit 25';


//Build SQL Query string for Team Letters and Names from table Rm####Scores
function buildSQLstringNames ($room, $round, $quesNum) 
  return 'SELECT LeftTeamLetter, LeftTeamName, RightTeamLetter, RightTeamName from ' . roomScoresTableName($room) . ' where RR_DE_PK1 = "' . $round . '" and QuesNumPK2="01" limit 1';


try 
  $conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD );
  $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

catch ( PDOException $e ) 
  echo DB_DSM . "Database Connection failed: " . $e->getMessage();

try 
//While processing Room Scores MySQL table Rm####Scores one row at a time, transfer each row to $scoresArray and accumulate Running totals for both Left and Right teams from start of Round until current question.   Then display in reverse order of questions.
  $idr = 0;
  $sqlScores = buildSQLstringScores ($room, $round, $quesNum);
//echo '<p> $sqlScores=' . $sqlScores . '</p>';
//echo '<p> $scoresCols Size=' . count($scoresCols) . '</p>';
//  print_r ( $scoresCols );
//  echo '</pre>';
  $scoresRows = $conn->query( $sqlScores );
//Xfer Scores values to local array (one row at a time), note: left and right Question sums and Runing Totals (set = 0) are calculated as such by Select statement processed by MySQL
  foreach ( $scoresRows as $scoresRow ) 
//  echo '<h4>Scores Row #' . (string)$idr . ':</h4><pre>';
//  print_r ( $scoresRow );
//  echo '</pre>';
    for ($idc=0; $idc<(count($scoresCols)); $idc++) 
      $scoresArray[$idr][$scoresCols[$idc]] = $scoresRow[$scoresCols[$idc]];

//    echo '<br> $idr=' . $idr . ', $idc=' . $idc . ', $ScoresCols[$idc]=' . $scoresCols[$idc] . ', $scoresArray[$idr][$scoresCols[$idc]] =' . $scoresArray[$idr][$scoresCols[$idc]] ;
      if ($idr == 0)
        $scoresArray[$idr]["LeftRunTot"] = $scoresRow["LeftQuesSum"];
        $scoresArray[$idr]["RightRunTot"] = $scoresRow["RightQuesSum"];
      
      else
      
        $scoresArray[$idr]["LeftRunTot"] = $scoresRow["LeftQuesSum"] + $scoresArray[$idr-1]["LeftRunTot"];
        $scoresArray[$idr]["RightRunTot"] = $scoresRow["RightQuesSum"] + $scoresArray[$idr-1]["RightRunTot"];
      
    
    $idr++;
  
//  echo '<h4>Scores Array:</h4><pre>';
//  print_r ( $scoresArray );
//  echo '</pre>';

catch ( PDOException $e ) 
  echo "Room Scores Query failed: " . $e->getMessage();


*/


//echo '<h4>Scores Row #' . (string)$idr . ':</h4><pre>';
//print_r ( $scoresArray );
//echo '</pre>';

//Print table header
echo '<hd1 align="center"><b>' . htmlSpaces(60) . 'AZ Science Bowl  --Scorekeepers\' Application for Room ' . $room . ' </b></hd1><br>';

/*

$sqlNames = buildSQLstringNames ($room, $round, $quesNum);

try 
  $namesRows = $conn->query( $sqlNames );
  foreach ( $namesRows as $namesRow ) 
*/

    $spacesNeeded = max(0, 65-(2*strlen($namesRow["LeftTeamName"])));
    echo '<br>' . htmlSpaces(24) . 'Left TEAM <b>-"' . $namesRow["LeftTeamLetter"] . '"- "' . $namesRow["LeftTeamName"] . '"</b>' . htmlSpaces($spacesNeeded) .'Right TEAM <b>-"' . $namesRow["RightTeamLetter"] . '"- "' . $namesRow["RightTeamName"] . '"</b>';

/*
  

catch ( PDOException $e ) 
  echo "Names Query failed: " . $e->getMessage();

*/

echo '<form name="rmOne" id="room" action="scoreingsubmitpagetwo.php"  method="post">';

  echo 'First name: <input type="text" name="fname" id="fname" value="Donald"><br>';
  echo 'Last name: <input type="text" name="lname" value="Duck"><br>';
//echo '<input type="submit" value="Submit">';

echo '<p>Click the "Try it" button to display the value of the first element in the form.</p>';

echo '<input type="button" onclick="javascript:myFunction()" value="Try it" />';

echo '<p id="demo"></p>';

  echo '<div style="width: 30em">';
    echo '<input type="hidden" name="roomSel" id="roomSel" value="' . $room . '>';
    echo '<input type="hidden" name="roundSel" id="roundSel" value="' . $round . '>';
    echo '<input type="hidden" name="quesSel" id="quesSel" value="' . $quesNum . '>';

    echo '<span id="LeftPenalty">#</span>';
    echo '<span id="LeftToss">#</span>';
    echo '<span id="LeftBonus">#</span>';
    echo '<label for="clickLeftPenalty">Penalty</label>';
    echo '<label for="clickLeftToss">Toss</label>';
    echo '<label for="clickLeftBonus">Bonus</label>';
    echo '<br><input type="button" name="clickLeftPenalty" id="clickLeftPenalty" value="+4 / 0" onclick="javascript:leftPenalty()" />';
    echo '<input type="button" name="clickLeftToss" id="clickLeftToss" value="+4 / 0" onclick="javascript:leftToss()" />';
    echo '<input type="button" name="clickLeftBonus" id="clickLeftBonus" value="+10 / 0" onclick="javascript:leftBonus()" />';
echo '</div>';

echo '<table style="width:100%">';
echo '<tr>';
for ($idc=0; $idc<(count($scoresTitlesPrinted)); $idc++) 
  echo '<th align="left">' . $scoresTitlesPrinted[$idc] . '</th>';

echo '</tr>';
//Print rows of question scores in reverse order
for ($idr=$quesNum-1; $idr>=0; $idr--) 
  echo '<tr>';
  for ($idc=1; $idc<(count($scoresCols)); $idc++) 
    if ($scoresArray[$idr][$scoresCols[$idc]] > 0)
      echo '<td align="left"><b>' . $scoresArray[$idr][$scoresCols[$idc]] . '</b></td>';
    else
      echo '<td align="left"> 0 </td>';

  
  echo '</tr>';


$conn = null;
?>
</table>
</form>
</body>
</html>

感激不尽!

【讨论】:

发现编码错误,但没有改善。第 249、250 和 251 行是输入 type="hidden",每行都应以以下字符结尾: . '" />'; 而不是 . '>'; 刚刚检查了 apache 错误日志,没有任何内容。如果您尝试此代码,请进行上述更改。【参考方案4】:

请注意,这仍未解决:建议已被纳入,但 W3Schools 示例代码,即使使用上述建议进行修改,也可以自行工作,但是当该代码集成到我的 (已编辑)应用程序代码,在调用的 Javascript 函数 myFunction() 开头的 alert() 不会发生(单击“尝试”时)。当然,随后在页面上读取或写入数据也不会发生。下面是我的代码的删减版本,这意味着所有原始 MySQL 代码都被删除了,而是将结果数据直接编码为数组或常量值,只是为了让我可以分享这个演示。调试代码也被砍掉了。请参考上面的 W3Schools 引用,然后尝试以下操作。我显然需要帮助。

 <!--       AZ Science Bowl Scorekeepers' tablet App Action page ==== Copyright 2017 by Geneous Products  -->
<!--  -->
<!--       This script ScoreingLoginPageZero.php of html, PHP and JavaScript code is called after initial loginto the system and is provided Competition Room ID, Round ID [likely to be retrieved from MySQL dtaserver) and a Question number  -->
<!--  -->
<!--       This script is provided room, round and question data from script ScoreingLoginPageZero.php using form control values in this script and $_POST references in ScoreingActionPageOne.php (which is called by a "Login" Submit control).  -->
<!--       Scorekeeper can click buttons to provisionally points to a Team's score as the questioning progresses. then click a Submit button request a verity page which will write the provisional score values to the DataBase, optionally advance the question number and call this page back up, displaying the updated data and ready to accept new provisional values. -->
<!--  -->
<!--       "Doctored" code for public testing of Scorekeepers' main tablet App  -->
<html>
<head>
<title>AZ Science Bowl  --  Scorekeeper in Competition Rooms</title>
<style type="text/css">
<!--
.cenx text-align: center;
.wfd width: 100%
img padding: 24pt;
body background-color: #aacc44; padding: 2%; font-family: Arial, sans-serif;
-->
table, th, td 
    border: 1px solid black;
    border-collapse: collapse;

</style>

<script type="text/javascript">

function leftPenalty()
alert("leftPenalty");
var oFormObject = document.forms['rmOne'];
alert('value=' + oFormObject.elements["LeftPenalty"]);
if ( oFormObject.elements["LeftPenalty"] == "4" ) 
  oFormObject.elements("LeftPenalty").value = "";
else
  oFormObject.elements("LeftPenalty").value = "4";



function leftToss()
alert("leftToss");
alert('value=' + document.elements["LeftToss"]);
if ( document.elements["LeftToss"] == "4" ) 
  document.getElementById("LeftToss").innerHTML = "";
else
  document.getElementById("LeftToss").innerHTML = "4";


function leftBonus()
alert("leftBonus");
var x = document.getElementById("mOne").elements[5].value;
alert('value=' + x);
if ( document.elements["LeftBonus"] == "10" ) 
  document.getElementById("LeftBonus").innerHTML = "";
else
  document.getElementById("LeftBonus").innerHTML = "10";




function myFunction() 
    alert('myFunction called');
    var x = document.getElementById("rmOne");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) 
        txt = txt + x.elements[i].value + "<br>";
    
    document.getElementById("demo").innerHTML = txt;


function myFunction2() 
  <?php
  foreach($_POST as $index => $element):
  ?>
  output(<?= $index ?>, '<?= $element ?>');
  <?php endforeach; ?>


function output(element, index, array) 
  document.write(index + element + "<br>")

</script>

</head>
<body>



<?php


$NUM_ROUND_EVENTS=7;
$NUM_WAVE_FILES=17;
$MAX_ROOMS=9;
$NUM_ROOM_SCORES_COLS=12;
$MAX_ROUNDS=16;
$NUM_QUESTIONS_PER_ROUND_MAX=25;
$ROOM_SCORES_SKEL="Rm####Scores";

$room = 'Badd';
$round = 'RR1';
$quesNum = '05';


//Define an array of printed column names
$scoresTitlesPrinted = array ('Ques #','Penalty','TossUp','Bonus','Sum','Total','Penalty','TossUp','Bonus','Sum','Total');
//Define a sub array to hold the name of each column of DB Table Rm####Scores
$scoresCols =           array ("RR_DE_PK1",    "QuesNumPK2",   "LeftPenalty",   "LeftToss",   "LeftBonus",   "LeftQuesSum",   "LeftRunTot",   "RightPenalty",    "RightToss",   "RightBonus",   "RightQuesSum",   "RightRunTot");
//Define an internal array to hold all values for a given Room and Round Scores
$scoresArray = array (
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>1,"LeftPenalty"=>0,"LeftToss"=>1,"LeftBonus"=>0,"LeftQuesSum"=>1,"LeftRunTot"=>1,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>2,"LeftPenalty"=>4,"LeftToss"=>2,"LeftBonus"=>0,"LeftQuesSum"=>6,"LeftRunTot"=>7,"RightPenalty"=>0, "RightToss"=>4,"RightBonus"=>0,"RightQuesSum"=>4,"RightRunTot"=>4),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>3,"LeftPenalty"=>4,"LeftToss"=>3,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>4,"RightBonus"=>10,"RightQuesSum"=>14,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>4,"LeftPenalty"=>0,"LeftToss"=>4,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"RR1","QuesNumPK2"=>5,"LeftPenalty"=>0,"LeftToss"=>5,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>18),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0),
                        array ("RR_DE_PK1"=>"","QuesNumPK2"=>0,"LeftPenalty"=>0,"LeftToss"=>0,"LeftBonus"=>0,"LeftQuesSum"=>0,"LeftRunTot"=>0,"RightPenalty"=>0, "RightToss"=>0,"RightBonus"=>0,"RightQuesSum"=>0,"RightRunTot"=>0)
                     );

$namesRow = array( "LeftTeamLetter"=>"B", "LeftTeamName"=>"Team L in 0203", "RightTeamLetter"=>"D", "RightTeamName"=>"Team R in 0203"   );


//Create a string of $count 'non-break html spaces' (where $count is between 0 and 100)
function htmlSpaces ($count) 
  $strSp = '';
  if ($count > 0 && $count <=100)
    for ($idx=0; $idx<$count; $idx++)
      $strSp .= '&nbsp;';
  return $strSp;



//Print table header
echo '<hd1 align="center"><b>' . htmlSpaces(60) . 'AZ Science Bowl  --Scorekeepers\' Application for Room ' . $room . ' </b></hd1><br>';


    $spacesNeeded = max(0, 65-(2*strlen($namesRow["LeftTeamName"])));
    echo '<br>' . htmlSpaces(24) . 'Left TEAM <b>-"' . $namesRow["LeftTeamLetter"] . '"- "' . $namesRow["LeftTeamName"] . '"</b>' . htmlSpaces($spacesNeeded) .'Right TEAM <b>-"' . $namesRow["RightTeamLetter"] . '"- "' . $namesRow["RightTeamName"] . '"</b>';


echo '<form name="rmOne" id="room" action="scoreingsubmitpagetwo.php"  method="post">';

  echo 'First name: <input type="text" name="fname" id="fname" value="Donald"><br>';
  echo 'Last name: <input type="text" name="lname" value="Duck"><br>';
//echo '<input type="submit" value="Submit">';

echo '<p>Click the "Try it" button to display the value of the first element in the form.</p>';

echo '<input type="button" onclick="javascript:myFunction()" value="Try it" />';

echo '<p id="demo"></p>';

  echo '<div style="width: 30em">';
    echo '<input type="hidden" name="roomSel" id="roomSel" value="' . $room . '" />';
    echo '<input type="hidden" name="roundSel" id="roundSel" value="' . $round . '" />';
    echo '<input type="hidden" name="quesSel" id="quesSel" value="' . $quesNum . '" />';

    echo '<span id="LeftPenalty">#</span>';
    echo '<span id="LeftToss">#</span>';
    echo '<span id="LeftBonus">#</span>';
    echo '<label for="clickLeftPenalty">Penalty</label>';
    echo '<label for="clickLeftToss">Toss</label>';
    echo '<label for="clickLeftBonus">Bonus</label>';
    echo '<br><input type="button" name="clickLeftPenalty" id="clickLeftPenalty" value="+4 / 0" onclick="javascript:leftPenalty()" />';
    echo '<input type="button" name="clickLeftToss" id="clickLeftToss" value="+4 / 0" onclick="javascript:leftToss()" />';
    echo '<input type="button" name="clickLeftBonus" id="clickLeftBonus" value="+10 / 0" onclick="javascript:leftBonus()" />';
echo '</div>';

echo '<table style="width:100%">';
echo '<tr>';
for ($idc=0; $idc<(count($scoresTitlesPrinted)); $idc++) 
  echo '<th align="left">' . $scoresTitlesPrinted[$idc] . '</th>';

echo '</tr>';
//Print rows of question scores in reverse order
for ($idr=$quesNum-1; $idr>=0; $idr--) 
  echo '<tr>';
  for ($idc=1; $idc<(count($scoresCols)); $idc++) 
    if ($scoresArray[$idr][$scoresCols[$idc]] > 0)
      echo '<td align="left"><b>' . $scoresArray[$idr][$scoresCols[$idc]] . '</b></td>';
    else
      echo '<td align="left"> 0 </td>';

  
  echo '</tr>';


$conn = null;
?>
</table>
</form>
</body>
</html>

【讨论】:

W3Schools 示例代码位于w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements PS:我什至尝试将上述 URL 的尾部添加到浏览器的输入行,但没有帮助。叹息【参考方案5】:
<script type="text/javascript">
...

function myFunction() 
    var x = document.getElementById("rmOne");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) 
        txt = txt + x.elements[i].value + "<br>";
    
    document.getElementById("demo").innerHTML = txt;


function myFunction2() 
  <?php
  foreach($_POST as $index => $element):
  ?>
  output(<?= $index ?>, '<?= $element ?>');
  <?php endforeach; ?>


function output(element, index, array) 
  document.write(index + element + "<br>")

</script>

【讨论】:

感谢您改进代码。可悲的是,虽然这些作为单独的程序提交时可以工作,但是当集成到我现有的代码中时,屏幕上没有任何变化。这些不是我将产生的实际功能,但它们执行了我想要的框架。然后我会推断。 我将 DazZDylz 的“myFunction()”版本放入 Donald Duck 示例(来自 W3Schools),它可以工作。我还将按钮定义更改为 并且也有效。但是,当将原始样式按钮 放入我的“问题”php代码中时,会导致调用表单“操作”页面(未编写)而不是myFunction() !!!???.

以上是关于在我将它们合并到其他 Javascript 之前,innerHTML 示例运行良好的主要内容,如果未能解决你的问题,请参考以下文章

将多个 JavaScript 文件合并为一个 JS 文件 [关闭]

我将如何减少这个数组,以便每个对象中的对象被合并 javascript 但不知道键值名称

在我将自动播放的首选项更改为“允许所有自动播放”之前,javascript 中的视频播放() api 在 safari 中不起作用

如何合并外部 JavaScript 文件

我将视频与其他视频合并后将其上传到服务器,但录制的视频顺时针旋转

从两个排序数组中获取前 K 项而不合并它们