How to get

Question

I’m working at a web GUI for an audio mixer. Therefor I have lot of repetitive faders. All looking the same, just differing by ID. The ID is a three digit number. The first digit is provide by the main php page, the other are repetitive in each fader section. I’m trying to get the result back from the server and posting it into a span field. The problem is that the span id depends on the full id.

The span id should be “result111”.Not hardcoded as it is but dynamically generated by the provide id followed by the identifier 11.

GUI php
<script>
function transfer(value,id)
{
 if (window.XMLHttpRequest)
 {
   // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
   xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // AJAX mit IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
 {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
    document.getElementById("result"+id).innerHTML=xmlhttp.responseText;
   }
 }
  xmlhttp.open("GET","backEnd.php?v="+value+"&id="+id,true);
  xmlhttp.send();
 return;
}
</script>

backEnd.php

<?php
$id = 10;
$value = 7;
$result = 6;
if ( isset($_GET['id']) )
{
   $id = $_GET['id'];
}
if ( isset($_GET['v']) )
{
   $value = $_GET['v'];
   $result = $value;
}
echo ("$id + $result");
?>

GUI.php
<?php
 $id = 1;
 include 'fader.php';
?>

 fader.php
  
  
<script>
 var id = <?php echo "$id"; ?>;
 function setName (id2){
  var fullId =""+ id + id2;
  return fullId;
 }
 function setNameReturn (id2){
  var fullIdReturn =""+ id + id2;
  return fullIdReturn;
 }
 </script>
  
  <form oninput="transfer(auswertung.value,setName(11))">
    <input type="range" name="auswertung" min="0" max= "63" value="30" orient="vertical">
    <br>
    <span id="setNameReturn (11)">n.a.</Span>
 </form>

At which step of the process (getting provided id, combining provided id with the identifier 11, putting resulting id as id for span) do you have the problem? — Geshode, Jan 11 '18 at 06:08
In the code sample the span id is hardcode to result111. What I need is something similar to setName(id). — geerkins, Jan 11 '18 at 06:16
So, make something similar to setName(id) and put the result as id for span. — Geshode, Jan 11 '18 at 06:19
did so but thats not working i get document.getElementById(...) is null — geerkins, Jan 11 '18 at 06:20
Where in the code have you done so? You only provided code in which you hard coded the id. But there is no code in your post, which shows how you attempted to put the result of a function into the id of span. Also, why do you use javascript for adding the two ids instead of using php and then just echoing the result in the id of span? — Geshode, Jan 11 '18 at 06:23
And whats the Way to get "111"? php echo is fine for me as well. — geerkins, Jan 11 '18 at 06:35
Btw, you get "document.getElementById(...) is null", because you use it, before the span id is even set. — Geshode, Jan 11 '18 at 07:02
Thanks for al the help. I understand what the problem is, but I cant't figure out the solution. May you help me there please? — geerkins, Jan 11 '18 at 07:31

Oleg Butuzov · Answer 1 · 2018-01-11T06:07:40.343

0

You passing value to your function in next way

transfer(auswertung.value,setName(11))

11, while expecting 111

is this your problem?

Update: Just to be clear, everything you generated in PHP stays in PHP, you need to geenrate JS assignment to pass value to JS. You currently have hardcoded value of 11 at your transfer function, and span result111.

edited Jan 11 '18 at 06:07

answered Jan 11 '18 at 05:58

Oleg Butuzov

4,795
2
24
33

Too bad - `transfer` will work with **result11** but haev only **result111** span. – Oleg Butuzov Jan 11 '18 at 06:02
no the missing 1 is passed from the GUI.php. The ID is shaped 1 1 1 (chanal block fader). Block and fader are the same in each included mixer bench, but chanal changes every time. So chanal is passed from the GUI.php. What I'm trying to get is the combination of passed chanal and always fixed block and fader. I know my explanation is qite bad – geerkins Jan 11 '18 at 06:09
Oh. I see. So why would you not check whats come to transfer first, whats in ready state block? its pretty easy to do using console.log or var_dump functions... – Oleg Butuzov Jan 11 '18 at 06:15
Sorry but I dont get you here. When i hardcode result111 everything works fine but wen i try to do ist dynamicly i get document.getElementById(...) is null – geerkins Jan 11 '18 at 06:20
Oh... Check this out -> https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript#500459 – Oleg Butuzov Jan 11 '18 at 06:34
Thanks a lot but I still don't get it. :/ – geerkins Jan 11 '18 at 06:48

score 0 · Answer 2 · answered Jan 11 '18 at 07:53

This might work or it might not. It is just an attempt, because you asked me for it in the comments. Have a try and see, what happens.

GUI.php

<?php
$id = 1;

function getSpanId($addedid){
    $spanid = $id + $addedid;
    return $spanid;
}
?>

<script>
function transfer(value,id)
{
    if (window.XMLHttpRequest)
    {
        // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // AJAX mit IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("result"+id).innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","backEnd.php?v="+value+"&id="+id,true);
    xmlhttp.send();
    return;
}
</script>

<?php
include 'fader.php';
?>

fader.php

<form oninput="transfer(auswertung.value,<?php getSpanId(11); ?>)">
    <input type="range" name="auswertung" min="0" max= "63" value="30" orient="vertical">
    <br>
    <span id="<?php getSpanId(11); ?>">n.a.</Span>
</form>

How to get

2 Answers2