【发布时间】:2020-07-29 11:50:01
【问题描述】:
我正在使用html、css、js 和php 开发一个刽子手游戏。
- 使用
php,您可以从xampp mysql server中的unordered display中获得random word。 - 通过使用
javascript,input boxes会根据单词的length自动创建。 - 填写所有输入框后,会出现一个
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