i cant figure out how to use one script function for more id's. for just one id it works well, but if i activate the secound
include('scripts/js/js_dynamisches_textdarstellung.php');
the array text is splited over both ID's. i know the code is disgusting atm, but it's my first try to understand how it works and it's nice to see the different forms how i could set the variables from php to javascript. the problem what i see is, that the function has all the time the same name but i don't find a solution how to solve that. thx for help
main.php
<a href="#" target="_blank" id="dyn_Loop_main_v1">Bla to TEXT 1</a></li>
<?php
$var_anzahl_i_php = 0;
$name_der_funktion = "thats_it_1";
$var_reaktionszeit_in_ms_php = 1500;
$var_id_php = "dyn_Loop_main_v1";
$var_array_php = array("TEXT for ID_1_1",
"TEXT for ID_1_2",
"TEXT for ID_1_3",
"TEXT for ID_1_4");
$var_count_array = count($var_array_php);
print "<script type='text/javascript'> var var_array_inhalt = ".json_encode($var_array_php)."; </script>";
//print "<script type='text/javascript'> var var_funktionsname = ".json_encode($name_der_funktion).$name_der_funktion."; </script>";
include('scripts/js/js_dynamisches_textdarstellung.php');
?>
<a href="#" target="_blank" id="dyn_Loop_main_v2">Bla to Text 2</a></li>
<?php
$var_anzahl_i_php = 0;
$name_der_funktion = "thats_it_2";
$var_reaktionszeit_in_ms_php = 1000;
$var_id_php = "dyn_Loop_main_v2";
$var_array_php = array("TEXT for ID_2_1",
"TEXT for ID_2_2",
"TEXT for ID_2_3",
"TEXT for ID_2_4");
$var_count_array = count($var_array_php);
print "<script type='text/javascript'> var var_array_inhalt = ".json_encode($var_array_php)."; </script>";
//print "<script type='text/javascript'> var var_funktionsname = ".json_encode($name_der_funktion).$name_der_funktion."; </script>";
include('scripts/js/js_dynamisches_textdarstellung.php');
?>
js_dynamisches_textdarstellung.php
<script>
var var_anzahl_i = "<?php echo $var_anzahl_i_php ?>";
var var_i_from_count_i = "<?php echo $var_count_array ?>";
var var_ms_from_count_i = "<?php echo $var_reaktionszeit_in_ms_php ?>";
function var_funktionsname() {
setTimeout(function () {
document.getElementById('<?php echo $var_id_php ?>').innerHTML = var_array_inhalt[var_anzahl_i];
var_anzahl_i++;
if ( var_anzahl_i == var_i_from_count_i ) { var_anzahl_i = 0}
if ( var_anzahl_i < var_i_from_count_i + +1) {
var_funktionsname();
}
}, var_ms_from_count_i)
}
var_funktionsname();
</script>
Here's a quick mock up of how I think you should do this. This is not tested, there might be typos, etc..
<?php
$paragraphs = []; // create an empty array we will put our two paragraphs into
// define your two paragraphs/text-items with everything that's unique to them:
$paragraph = new stdClass(); // just creates a simple object we can fill with infos
$paragraph->elementId = "dyn_Loop_main_v1"; // the id of the related html element
$paragraph->updateTime = 1500; // how quick it should switch to next text in ms
$paragraph->content = array("TEXT for ID_1_1",
"TEXT for ID_1_2",
"TEXT for ID_1_3",
"TEXT for ID_1_4");
$paragraph->default = "Default Text 1";
$paragraphs[] = $paragraph; // add this paragraph to the array
// same for the second paragraph:
$paragraph = new stdClass();
$paragraph->elementId = "dyn_Loop_main_v2";
$paragraph->updateTime = 1000;
$paragraph->content = array("TEXT for ID_2_1",
"TEXT for ID_2_2",
"TEXT for ID_2_3",
"TEXT for ID_2_4");
$paragraph->default = "Default Text 2";
$paragraphs[] = $paragraph; // add this paragraph to the array
// you could now also create those 2 elements dynamicly via php:
foreach($paragraphs as $paragraph) {
echo "<span id='{$paragraph->elementId}'>{$paragraph->default}</span>
";
}
// OR write them hardcoded:
?>
<span id="dyn_Loop_main_v1">Default TEXT 1</span>
<span id="dyn_Loop_main_v2">Default TEXT 2</span>
<?php
// now let's transfer our paragraphs to javascript so that we can continue there:
?>
<script>
var paragraphs = <?php echo json_encode($paragraphs, JSON_PRETTY_PRINT); ?>;
</script>
This should look like this when parsed ("view source"):
var paragraphs = [
{
"elementId": "dyn_Loop_main_v1",
"updateTime": 1500,
"content": [
"TEXT for ID_1_1",
"TEXT for ID_1_2",
"TEXT for ID_1_3",
"TEXT for ID_1_4"
],
"default": "Default Text 1",
"counter": 0
},
{
"elementId": "dyn_Loop_main_v2",
"updateTime": 1000,
"content": [
"TEXT for ID_2_1",
"TEXT for ID_2_2",
"TEXT for ID_2_3",
"TEXT for ID_2_4"
],
"default": "Default Text 2",
"counter": 0
}
];
And here's the main javascript part:
<script>
// define a function that updates the paragraphs and increases the counter.
// it takes one paragraph object as parameter.
function updateParagraph(paragraph) {
document.getElementById(paragraph.elementId).innerHTML = paragraph.content[paragraph.counter];
paragraph.counter++; // set counter up
// if we've reached the end, reset to start:
if(paragraph.counter>=paragraph.content.length) {
paragraph.counter = 0;
}
}
// let's call that function with our first paragraph as parameter with the updateTime defined in an Interval:
setInterval(function() {
updateParagraph(paragraphs[0]);
},
paragraphs[0].updateTime
);
// repeat for second:
setInterval(function() {
updateParagraph(paragraphs[1]);
},
paragraphs[1].updateTime
);
</script>
The last part could/should of course also get dynamic, hence called/set up automaticly for each paragraph like this:
paragraphs.forEach(function(paragraph) {
console.log(paragraph); // just checking what we've got here
setInterval(function() {
updateParagraph(paragraph);
},
paragraph.updateTime
);
});
Fiddle for the php part: https://3v4l.org/fp68u
Fiddle for the Javascript part: https://jsbin.com/nuxejutiga/edit?html,js,output