【问题标题】:modified javascript code unable to be saved修改后的 javascript 代码无法保存
【发布时间】:2020-07-29 11:50:01
【问题描述】:

我正在使用htmlcssjsphp 开发一个刽子手游戏。

  1. 使用php,您可以从xampp mysql server 中的unordered display 中获得random word
  2. 通过使用javascriptinput boxes 会根据单词的length 自动创建。
  3. 填写所有输入框后,会出现一个submit 按钮。

问题在于,在实现 php 功能以从数据库中获取项目之前,我仅使用 js 和给定单词 var word = "Rhodes" 测试我的应用程序。在实现php 并在我的屏幕中管理display a randomized word from the DB 并修改我的js 代码后,我还得到了我的随机单词旁边的word ="Rhodes",并且只有与"Rhodes" length 对应的输入框而不是新单词。

换句话说,我删除的代码仍然像以前一样运行 修改。

下面有我的新代码。使用 js 我得到了 php 词来创建输入框。它不起作用并显示旧代码。

function hangman(){
    var island = document.getElementById("random-island"); //the given word that is supposed to be found 
    createSpaces(island);
    const inputLists = document.querySelectorAll("input");
    document.querySelectorAll("input").forEach(el => {
      el.addEventListener('input', evt => {
          const showButton = [...inputLists].filter(ip => ip.value.trim() !== '').length === inputLists.length;
          document.getElementById('submitbtn').style.display = showButton ? 'block' : 'none';
      });
    });
}


function createSpaces(text){
    for(var i=0;i<text.length;i++){
      var space = document.createElement("input");
      space.setAttribute("class" , "dash");
      document.getElementById("hangman-container").appendChild(space);
    }
}
.transparent-box {
    border:none;
    position:absolute;
    top:10%;
    left:15%;
    background-color:black;
    height:500px;
    width:70%;
    opacity: 0.6;
}

.transparent-box p {
    color:white;  
    text-align:center;

}

.transparent-box h1 {
    color:white;
    position: relative;
    text-align:center;
    font-size:20px;
    top:30px;
}


#hangman-container {
    position: relative;
    width:auto;
    top:30%;
    left:0%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.dash {
    margin:0;
    padding:20px;
    align-items: flex-start;
    width:4%;
    border:none;
    border-radius: 5%;
    background-color: turquoise;
    color:red;
    font-size:40px;
}

.dash:focus {
    opacity:0.8;
}

#submitbtn {
    display: none;
    position: absolute;
    top:200%;
    left:80%;
    float:right; 
}
<body onload = hangman()>
   <div class = "transparent-box" id = "t-box">
      <p>Play here </p>
      <h1 id = "hidden-word">The word is :
         <?php
            $link = @mysqli_connect('localhost' , 'root' , 'password' ,'dbname');
            if(!$link){
                echo 'Error connecting to DB';
                exit;
            }
            
            $query = "SELECT island_name FROM dodecanese ORDER BY RAND() LIMIT 1";
            $result = @mysqli_query($link, $query);
            if(!$result){
                echo 'There is an issue with the DB';
                exit;
            }
            $row = @mysqli_fetch_assoc($result);
            echo '<span id = "random-island">'.str_shuffle($row['island_name']). '</span>';
            
            ?>
      </h1>
      <form id  = "hangman-container" method="POST">
         <button type = "submit" class = "hide" id="submitbtn">Submit</button>
      </form>
   </div>
</body>

感谢您对此的帮助。提前谢谢你。

【问题讨论】:

  • 用开发者工具检查你的 javascript,可能你“删除”的代码还在。
  • @ArielAlvarado 没什么可看的
  • 那么,没有旧代码?只有新代码吗?
  • @ArielAlvarado 旧的 .我检查得更好。但为什么 ?我该怎么办?
  • 尝试清除缓存,如果不起作用,请检查您的服务器中的代码是否更新(可能是/var/www/your-site)

标签: javascript php html mysql database


【解决方案1】:

我不完全理解您的实际问题。

但如果我理解正确的话——你希望 PHP 在这个游戏中发挥作用。 (即 PHP 连接到数据库,而不是 javascript 通过在数组中有一大串单词自行完成所有操作,然后将其取出,在客户端进行所有检查)。

那么我建议至少有 3 个文件(不提及资产):

  1. Index.html
  2. NewWordGenerator.php
  3. WordChecker.php

此外,如果可能的话,我建议您花一些时间熟悉 ajax。 jQuery 可能会为您提供更简单的 ajax 入口点。

建议的工作流程:

包含开始按钮、js + ajax 代码、占位符、样式等的 Index.html 文件。

当访问者按下“开始游戏”按钮时,它会触发 ajax 调用 NewWordGenerator.php 文件,该文件将连接到数据库并从您的数据库中获取任何随机单词,这些单词将显示在 index.php 中。 html ajax 成功时,js 将单词“剪切”成字母并放入占位符/表单等。

当玩家点击提交按钮时,javascript/jQuery 将阻止默认表单提交,通过 ajax 将用户输入发送到 WordChecker.php,WordChecker.php 将处理检查单词并给出返回并显示在 index.html 中的结果。

希望这是有道理的。

【讨论】:

  • 我已成功使用 php 从 sql 获取数据。问题是当我修改我的 js 代码时,保存的地方没有任何更改,并且程序会像 js 没有被修改一样运行
猜你喜欢
  • 1970-01-01
  • 2019-09-13
  • 1970-01-01
  • 2012-10-03
  • 1970-01-01
  • 1970-01-01
  • 2021-05-14
  • 2021-05-06
  • 1970-01-01
相关资源
最近更新 更多