我正在嘗試制作一個小功能，根據他們從下拉選單中選擇的選項來反轉影像的顏色。從一些在線研究中，我看到我可以使用 onchange() 函式使其作業，但由于某種原因，該函式沒有正確回應。代碼中的主要部分是名為“color”的 select div 和 invert 函式
<?php
session_start();
include("database.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$text = $_POST['text_custom'];
$ingredients = $_POST['ingredient'];
$color = $_POST['color'];
echo $color;
echo $text;
echo $ingredients;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap customiser.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-3 offset-1 d-flex justify-content-end" id="logo">
<a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
alt="logo"></a>
</div>
<div class="col-7 offset-1" id="navbar">
<a href="customizer_bootstrap.php">Customiser</a>
<a href="news.html">News</a>
<a href="about us.html">About us</a>
<?php
if (!empty($_SESSION['logged'])){
echo '<a href="account.php">Account</a>';
}else{
echo '<a href="login.php">Account</a>';
}
?>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12 text-center">
<h1>Customiser</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<img src="label.png" id="Gin_Label">
</div>
<div id="labeltext">
text
</div>
<div class="col-md-4 offset-md-2">
<form method="post">
<div id="textchanger">
<h3>Text Picker</h3>
<input type="text" id="textpicker" name="text_custom">
<input type="button" id="update" value="Click me!" onclick="changetext()">
</div>
<div id="colourchanger" class="row"></div>
<h3>Colour Picker</h3>
<div class="row">
<div class="col-md-1">
<select name="color" id="color" onchange="invert(value)">
<option value="White" id="option1">White</option>
<option value="Black" id="option2">Black</option>
</select>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-7">
<h3>Extra Ingredient</h3>
<select name="ingredient">
<option value="none">None</option>
<option value="lemon">Lemon</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-5">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function changetext() {
let bruh = document.getElementById('textpicker').value;
document.getElementById('labeltext').innerHTML = bruh;
}
function invert(value) {
if ((value = "Black"))
{
document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
if ((value = "White"))
{
document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
html select 元素中的 this 參考自身。在 javascript 中，元素引數是 select 并且只使用 value 屬性進行檢查，使用 (==) 或最好是 (===) 而不是 (=)。
function invert(element) {
var value = element.value;
if ((value === "Black"))
{
// document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
if ((value === "White"))
{
// document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
}<select name="color" id="color" onchange="invert(this);">
<option value="White" id="option1">White</option>
<option value="Black" id="option2">Black</option>
</select>
<div id="labeltext" style="color: #0000ff; background-color: #d0d0d0;">change color</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363223.html
標籤：javascript html