CODEWITHSUNDEEP
javascriptphphtmlcss
genespos
genespos

Reputation: 3311

Getting double quotes in Html element name

I'm trying to change visibility of some divs by click.
I'm adding "main" divs and "sub" divs using a php foreach loop on an array.
After that I add events using javascript to the elements having a specific class.

The problem is that the javascript function gets the name of the element with double quotes at the start and in the end.

I could solve by using a "substring" but I'm pretty new to web programming and I need to understand why this happens or I'll never improve my skills.

Below there is all my code. 

<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
    position:relative;
    display: inline-block;
    width: 48%;
    margin: 3px;
    border: 3px solid #CCC;  
}

.Class2 {
    position:absolute;
    bottom:0;
    right:0;
    border: 1px solid #CCC;
    margin:1px;
    background: #FFC;
} 
.H_p {
    border: 1px solid #CCC;
    display: inline-block;
}
.Opt {
    border: 1px solid #CCC;
    display: none;
}
</style>
</head>
<body>
<?php 
$Divs = array('Div1'=>'Class1', 
    'Div2'=>'Class1', 
    'Div3'=>'Class1', 
    'Div4'=>'Class1', 
    'Div5'=>'Class1');

$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
    echo '
    <div class="'.$Class.'">';
    echo $Name.'<br/>';
    echo '
        <p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
    echo '
            <div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
    foreach ($AskToShow as $H_Name=>$Id){
        echo'
                <p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
    }
    echo '
            </div>';
    echo '
    </div>';
}
?>
<script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        alert (SenderId);
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        alert (SubId);
        var SubSH = document.getElementById(SubId);
        if (!SubSH){
            alert("Empty"); //This is the alert shown!!
        }else{
            alert(SubSH.name);
        }
        if (SubSH.style.display == 'none'){
            document.getElementById(SubId).style.display = 'block'; 
        }else{
            document.getElementById(SubId).style.display = 'none';
        }
    };

    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
</script>
</body>
</html>

Upvotes: 1

Views: 1220

Answers (2)

Quentin
Quentin

Reputation: 943568

<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';

You are using ” (RIGHT DOUBLE QUOTATION MARK) to delimit your attribute values. Only " (QUOTATION MARK) and ' (APOSTROPHE) are allowed.

The RIGHT DOUBLE QUOTATION MARK is, therefore, being treated as data and not as a delimiter.

This code example shows the three characters at a large font size so you can clearly see the difference between them.

body { font-size: 50px; }
”<br>"<br>'

This is often caused by writing HTML using a word processor instead of a text editor.

Upvotes: 2

Tobias Sch&#228;fer
Tobias Sch&#228;fer

Reputation: 1358

 <p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';

There you used the wrong quote type ”.

Hope this fixes it.

Upvotes: 1

Related Questions