I have a working example here.
https://jsfiddle.net/kdv5au7w/3/
as u can see it all works well it just looks like crap atm. As you can see once u click in message field all the data is populated to the marker div with listener.
and when i make it look nice it stops working
https://jsfiddle.net/orcam6zs/3/
when I use a flip card if gives this error
var jname = document.getElementById("name");
var jnameValue = jname.value;
document.getElementById("CxName").innerText = 'Phone: '+ jnameValue;
Uncaught TypeError: document.getElementById(...) is null
Now if you click previous button and click next again it will populate after the map div is shown using the script below. Can anyone help me fix the issue? Can anyone explain whats going on? Im assuming it has something to do with the map loading or something. I’ve tried removing the async. I’ve tried placing the code in different locations. Ive looked in the source and inspected and cant see the marker div info window until the map div is visible, so im assuming im loading the map wrong I have an alert that is set when initMap ran after a user clicks on the click map button and not when the page loads so it should work even tho its not visible right??
Can anyone look at my java script and help me?
document.getElementById("markerinfo").addEventListener("click", fillmark);
function fillmark() {
var jname = document.getElementById("name");
var jnameValue = jname.value;
document.getElementById("CxName").innerText = 'Name: '+ jnameValue;
var jphone = document.getElementById("phone");
var jphoneValue = jphone.value;
document.getElementById("CxPhone").innerText = 'Phone: '+ jphoneValue;
var jemail = document.getElementById("email");
var jemailValue = jemail.value;
document.getElementById("CxEmail").innerText = 'Email: '+ jemailValue;
var jloc = document.getElementById("location");
var jlocValue = jloc.value;
document.getElementById("CxLoc").innerText = 'Address: '+ jlocValue;
var jyear = document.getElementById("year");
var jyearValue = jyear.value;
document.getElementById("CxYear").innerText = 'Year: '+ jyearValue;
var jmake = document.getElementById("make");
var jmakeValue = jmake.value;
document.getElementById("CxMake").innerText = 'Make: '+ jmakeValue;
var jmodel = document.getElementById("model");
var jmodelValue = jyear.value;
document.getElementById("CxModel").innerText = 'Model: '+ jmodelValue;
if (document.getElementById('yes').checked) {
document.getElementById("CxIns").innerText = 'Insurance: Yes';
}
if (document.getElementById('no').checked) {
document.getElementById("CxIns").innerText = 'Insurance: No';
}
var jbill = document.getElementById("sloc");
var jbillValue = jbill.value;
document.getElementById("CXBill").innerText = 'Billing: '+ jbillValue;
}