Question

我使用JS AND 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>

JS

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

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

window.addEventListener("load", init);

Answer 1

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

有关如何避免这种情况的大量信息：http://www.codexpedia.com/javascript/submitting-html-form-without-reload-the-page/

Answer 2

这与php无关。

正在发生的事情是你的style函数运行，但是然后提交按钮的默认事件（即＃34;实际提交表单＆＃34;）接管并且你的表单是发送，导致页面重新加载。在提交完成时，您只能看到样式的瞬间更改，并且由于网页在页面加载之间不保持状态，因此一旦页面再次加载，样式更改将立即恢复。

为什么php-code会覆盖javascript？

2 个答案: