为什么php代码会覆盖javascript？_Javascript_Php_Html_Css

为什么php代码会覆盖javascript？

javascript php html css

为什么php代码会覆盖javascript？,javascript,php,html,css,Javascript,Php,Html,Css,我使用JS和PHP的第一个绊脚石我四处尝试，发现当JS和PHP引用同一个元素时，JS似乎不再在HTML中进行持久性更改。在我的示例中，当单击按钮时，背景颜色会改变一部分秒，然后返回到旧状态。显然，PHP代码与此有关。我想知道为什么会发生这种情况，以及如何处理它（因为我真的希望在按下按钮并执行PHP代码时改变背景颜色） HTML/PHP <!DOCTYPE HTML> <html> <head> <title>Rechner</title&

我使用JS和PHP的第一个绊脚石

我四处尝试，发现当JS和PHP引用同一个元素时，JS似乎不再在HTML中进行持久性更改。在我的示例中，当单击按钮时，背景颜色会改变一部分秒，然后返回到旧状态。显然，PHP代码与此有关。我想知道为什么会发生这种情况，以及如何处理它（因为我真的希望在按下按钮并执行PHP代码时改变背景颜色）

HTML/PHP

<!DOCTYPE HTML>

<html>
<head>
<title>Rechner</title>
<link href="neu/rezepte.css" rel="stylesheet">
</head>

<body>

<h2>Ein simpler Taschenrechner.</h2>

<form action = "rezepte.php" method = "post">

<p>Zahl1: </p><input type="text" name="a" value ="<?php if(isset($_POST["a"])&&is_numeric($_POST["a"])) {echo $_POST["a"];}?>"><br/>

<p>Wähle eine Rechenoperation:</p>
<select name="rz">
<option>+</option>    
<option>-</option>    
<option>*</option>    
<option>/</option>    
</select><br/>
 <p>Zahl2: </p><input type="text" name="b" value ="<?php if(isset($_POST["b"])&&is_numeric($_POST["b"])) {echo $_POST["b"];}?>"><br/>
<input type="submit" value="Rechne!" id="test">

</form>

<?php

if (isset($_POST["a"])&& is_numeric($_POST["a"]) && isset($_POST["b"])&& is_numeric($_POST["b"])) {
    switch($_POST["rz"]) {
        case "+": 
            $c = $_POST["a"] + $_POST["b"]; 
            break;
        case "-": 
            $c = $_POST["a"] - $_POST["b"]; 
            break;
        case "*": 
            $c = $_POST["a"] * $_POST["b"]; 
            break;
        case "/": 
            $c = $_POST["a"] / $_POST["b"]; 
            break;
    }
    echo "<h3>Das Ergebnis lautet $c. </h3>";
}

?>
<script src='php_js.js'></script>
</body>

</html>

这实际上与php无关

发生的情况是，您的

style

函数运行，但随后提交按钮的默认事件（即“实际提交表单”）接管并发送表单，从而导致页面重新加载。当提交完成时，您只会在一瞬间看到样式更改，而且由于网页不会在页面加载之间保持状态，因此样式更改会在页面再次加载时立即恢复。

您需要了解PHP运行服务器端，javascript运行客户端。这意味着您的HTML页面将在服务器端准备好，所有的PHP都将在那里运行并生成您的HTML或进行任何工作。然后只有javascript和HTML会进入浏览器。正如其他人所说，提交表单后，您的页面也将刷新。因此，在页面刷新前的那一瞬间，单击事件将触发并添加黄色类，然后整个页面将刷新，再次添加单击事件侦听器，但页面状态将在单击之前，因为页面刚刚刷新，黄色类尚未添加

这里有一些关于如何避免这种情况的信息：

Er，你能给我们看看PHP代码吗？我不知道PHP与此有什么关系。除非您将更改保存在某个地方，否则web是无状态的。submit的输入类型将提交表单，页面将作为服务器响应重新加载。JS所做的更改只在文档的生命周期内保持不变。我猜您只是在提交表单并重新加载页面。页面重新加载。如果您想调用一个PHP，并且不丢失使用脚本对页面所做的所有更改，则需要将rezepte.PHP作为AJAX—我假设您只是在玩，因为PHP计算器非常愚蠢：）—您可以通过将单击发送到PHP并更改PHP中的类来保持对样式的更改

function init() {
document.getElementById("test").addEventListener("click", style);
}

function style() {
document.getElementsByTagName("body")[0].classList.add("yellow");
}

window.addEventListener("load", init);