Skythrust
Member
- Jul 9, 2019
- 133
- 7
Hi there!
I am learning again new stuff, and I am trying to find a solution to use a JSON Array with JavaScript/variable label id.
every record in the array does have an icon value (for example 1,2 or 3), First text and a second text. Every record does need his own label id value to use this code below.
I have searched a long time on the internet, but I got stucked in the codes, and I have no idea where I need to start :-(. the following step is to change the JSON array directly to a SQL Server Database.
JSON Array:
PHP Code (plain HTML)
Thanks in advance!
I have found the way for the class id, only now is the script left. I was assuming that I could realize this on this way. But it doesn't work.
I am learning again new stuff, and I am trying to find a solution to use a JSON Array with JavaScript/variable label id.
every record in the array does have an icon value (for example 1,2 or 3), First text and a second text. Every record does need his own label id value to use this code below.
I have searched a long time on the internet, but I got stucked in the codes, and I have no idea where I need to start :-(. the following step is to change the JSON array directly to a SQL Server Database.
JSON Array:
JSON:
$json = '[{"Id":"1","Icon":"1","FName":"Facebook","Sname":"ThisPasswordIsSecret"},{"Id":"2","Icon":"2","FName":"Instagram","Sname":"ThisPasswordIsSecret"},{"Id":"7","Icon":"3","FName":"Twitter","Sname":"ThisPasswordIsSecret"},]';
PHP Code (plain HTML)
HTML:
<body>
<div class="flip">
<div class="card">
<div class="face front">
<img src="IMAGEID" />
<div class="label" id="label">Facebook</div>
<button class="viewbtn" onclick="changeLabel()">🔓</button>
</div>
</div>
</div>
</body>
</html>
<script>
function changeLabel() {
let label = document.getElementById('label');
label.innerText = "ThisPasswordIsSecret";
setTimeout(function(){ document.getElementById("label").innerHTML = 'Facebook';}, 3000);
}
</script>
Thanks in advance!
Post automatically merged:
I have found the way for the class id, only now is the script left. I was assuming that I could realize this on this way. But it doesn't work.
Code:
<?php
$json = '[{"Id":"1","Icon":"1","FName":"Facebook","Sname":"ThisPasswordIsSecret"},{"Id":"2","Icon":"2","FName":"Instagram","Sname":"ThisPasswordIsSecret"},{"Id":"7","Icon":"3","FName":"Twitter","Sname":"ThisPasswordIsSecret"}]';
$array = json_decode($json, true);
?>
<?php foreach ($array as $record) { ?>
<div class="flip">
<div class="card">
<div class="face front">
<img src="https://lh3.googleusercontent.com/XDScQo39jp9nk8kzAY_GOGYkb999mmMIqQGacISVnkGNc-tnZDZ1lD4valDhPOz7wxTm3pgk=s50-h50-e365" />
<div class="label2" id="<?php echo "label".$record['Id']; ?>"><?php echo $record['FName']; ?></div>
<button class="viewbtn" onclick="changeLabel()">🔓</button>
</div>
</div>
</div>
<script>
function changeLabel() {
let label = document.getElementById('<?php echo 'label'.$record['Id']; ?>');
label.innerText = "test";
setTimeout(function(){ document.getElementById('<?php echo 'label'.$record['Id']; ?>').innerHTML = 'Works';}, 3000);
}
</script>
<?php } ?>
Last edited: