Styling calculated fields in repeatgroup using JS not working in detail

[milesreid]

Hi
I have a repeatgroup which contains a cell that I want to style with a background color which is dependent on the field's value (IE value of 0 green, 3 yellow, 27 red etc). The field is calculated and showing the correct data

For the form I can do this very satisfactorily in the JS using the code below. However I cannot get this to work in detail view - even after making the changes that are suggested in the wiki
The field is mitigated_risk in the hazard_evaluation table.

The JS code in the element is:

var form = Fabrik.getBlock('form_7');
var i = this.getRepeatNum();

const  elem = document.getElementById('hazard_evaluation___mitigated_risk_'+i);
const myparent = elem.parentElement;
const eb_1 = form.formElements.get('hazard_evaluation___mitigated_risk_'+i);

var cellValue = eb_1.getValue();
/* the classes used here style the background of the cell using CSS */
switch (cellValue){
case "0": myColor="ColorGreen"; break;
case "1":
case "2":
case "3":    myColor="ColorBeige";    break;
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "10":      myColor="ColorOchre";      break;

default:    myColor="ColorRed";
}
        myparent.classList="";
        myparent.classList.add("fabrikElement");
        myparent.classList.add(myColor);

The above works well and for the detail view I have changed 'form_7' to 'details_7'

var form = Fabrik.getBlock('details_7')

and have also changed the placeholder for the field which now reads:

'hazard_evaluation___mitigated_risk_ro_'+i

The result is that no styling takes place and the variable elem is null.
Why should this work in form view but not in detail view? What am I missing here?
TIA