修改后的javascript代码无法保存
我正在用html，css，js和php做一个绞刑游戏。
使用unordered display.
- By的
- --使用
javascript从xampp mysql server中获取random word，input boxes将根据单词的length自动创建。
H 116在填充所有输入框后出现submit按钮。H 218G 219
问题是，在实现php功能从DB获取一个项目之前，我只使用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>
我很感谢你在这方面的帮助。提前谢谢你。
回答 1
Stack Overflow用户
发布于 2020-07-29 12:34:13
我不完全明白你的实际问题是什么。
但是如果我理解正确的话-你会希望PHP在这个游戏中扮演一个角色。(即PHP连接到数据库，而不是javascript通过数组中有一个大的单词列表来完成所有事情，捡起它，在客户端进行检查)。
那么，我建议至少有3个文件(不提资产)：
- Index.html
- NewWordGenerator.php
- WordChecker.php
此外，如果可能的话，我建议您花一些时间熟悉ajax。jQuery可能会为您提供一个更简单的ajax入口点。
建议的工作流：
具有开始按钮、js + ajax代码、占位符、样式等的Index.html文件。
当访问者按下“开始游戏”按钮时，它将触发ajax调用NewWordGenerator.php文件，该文件将连接到数据库，并从数据库中获取任意单词(在ajax成功时将在index.html中显示)，js将该单词“剪切”为字母，并将其放入占位符/表单等。
当玩家单击submit按钮时，javascript/jQuery将阻止默认表单提交，通过ajax将用户输入发送到WordChecker.php，后者将处理检查单词并给出在index.html中返回和显示的结果。
希望这是合理的。
https://stackoverflow.com/questions/63152961
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号