Question

我想做一个简单的测验。我有这个代码，但Javascript部分不起作用。 CSS没问题，但是当谈到onclick和onmouseover时没有任何反应。这是我的代码：

<html>
<head>

<style>
    body {
        background: url(bild.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .a {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -130px;
        margin-left: -500px;
        width: 400px;
        height: 50px;
        font-size: 30;
        color: black;
    }
    .b {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -130px;
        margin-left: -20px;
        width: 400px;
        height: 50px;
        font-size: 30;
        color: black;
    }
    .c {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -500px;
        width: 400px;
        height: 50px;
        font-size: 30;
        color: black;
    }
    .d {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -20px;
        width: 400px;
        height: 50px;
        font-size: 30;
        color: black;
    }
</style>
<title>Moseso.de Quiz</title>
</head>

<body>

<script>
    function overa() {
        document.getElementById("a").style.background="green";
    }
    function overb() {
        document.getElementById("b").style.background="green";
    }
    function overc() {
        document.getElementById("c").style.background="green";
    }
    function overd() {
        document.getElementById("d").style.background="green";
    }
    function outa() {
        document.getElementById("a").style.background="white";
    }
    function outb() {
        document.getElementById("b").style.background="white";
    }
    function outc() {
        document.getElementById("c").style.background="white";
    }
    function outd() {
        document.getElementById("d").style.background="white";
    }
    function true() {
        alert("Richtig!");
    }
    function false() {
        alert("Falsch");
    }
</script>

<button class="a" id="a" onmouseover="overa();" onmouseout="outa();" onclick"true();">Antwort A</>
<button class="b" id="b" onmouseover="overb();" onmouseout="outb();" onclick"false();">Antwort B</>
<button class="c" id="c" onmouseover="overc();" onmouseout="outc();" onclick"false();">Antwort C</>
<button class="d" id="d" onmouseover="overd();" onmouseout="outd();" onclick"false();">Antwort D</>

<script>
    window.onload = function() {
        document.getElementById("a").style.background="#E6E6E6";
        document.getElementById("b").style.background="#E6E6E6";
        document.getElementById("c").style.background="#E6E6E6";
        document.getElementById("d").style.background="#E6E6E6";
    }
</script>

</body>
</html>

如果有人能回答我的问题会很好，因为我多次尝试过。该脚本是德语BTW：）

Answer 1

您不能对函数名称使用true或false等关键字。要修复此错误，请将true或false方法名称更改为其他名称。

每个按钮都缺少正确的</button>结束标记。将</>替换为</button>

此外，您缺少onclick属性的赋值运算符。确保在onclick之后和字符串赋值之前出现=。

我的javascript onclick和onmouseover出了什么问题？

1 个答案: