Reputation: 138
I have this code where I gotta update a SVG color, here is my code
As an exemple of my svg with is much bigger, a classic form, And my js :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<rect
class="tooltip"
id="b2"
y="60"
x="991.1"
height="18.01792"
width="9.3939571"
transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
/>
<rect
class="tooltip"
id="b3"
y="80"
x="979.58966"
height="16.477926"
width="9.8559551"
transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
/>
<form id="nameForm">
<input type="text" class="form-control" name="auto1" placeholder="enter state">
<button type= "submit" id='valider'>Recherche</button>
</form>
<script>
$('#valider').click( function(){
var stringName = $("#nameForm").find('input[name="auto1"]').val();
console.log(stringName);
var keys = Object.keys(tdata);
for (var z=1; z<keys.length+1; z++){
if(tdata[keys[z]].Utilisateur.toUpperCase() == stringName.toUpperCase())
{
console.log('OUI');
document.getElementById(keys[z]).style.setProperty("fill", "blue",
"important");
}
}
});
</script>
Upvotes: 1
Views: 2107
Reputation: 138
Ok it was just my button with type="submit" that was reloading my page on every call.
Set a type="button" and all is going well
Upvotes: 0
Reputation: 33072
I'm not very sure this is what you need since your example is not a functional example. Anyway: this is how you change the color with javascript:
you may change the style of the shape
you may change the attribute value.
I hope this helps.
b2.addEventListener("mouseover",()=>{
b2.style.fill="red";
})
b2.addEventListener("mouseleave",()=>{
b2.style.fill="black";
})
b3.addEventListener("mouseover",()=>{
b3.setAttributeNS(null,"fill","gold")
})
b3.addEventListener("mouseleave",()=>{
b3.setAttributeNS(null,"fill","black")
})
<svg viewBox="980 50 100 100">
<g id="g">
<rect
class="tooltip"
id="b2"
y="60"
x="991.1"
height="18.01792"
width="9.3939571"
transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
/>
<rect
class="tooltip"
id="b3"
y="80"
x="979.58966"
height="16.477926"
width="9.8559551"
transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
/>
</g></svg>
Upvotes: 1