Hey guys,
In my Project, I have an Input Element made by HTML but somehow I'm unable to target the element by ID. Am I doing something wrong?
Input:
<input id="Input1" type="text" style="width: 250px; height: 25px; border-top: none; border-left: none; border-right: none; background-color: white;" placeholder="Suche...">
</input>
Code:
InputText = window.parent.HYPE.documents['index'].getElementById("Input1").value
Btw Element and script run on the same scene
so you try this from within an iframe targeting its parent window (where the Hype-Div is part of the parent window) ...
it would then be:
parent.document.getElementById("Input1").value
////////////////////
in most cases a sample-link or file is a good approach to help others to help you 
Sadly I cannot post the file as it contains confidential data...
But here is the whole code:
Input:
<input id="Input1" type="text" style="width: 250px; height: 25px; border-top: none; border-left: none; border-right: none; background-color: white;" placeholder="Suche...">
</input>
Script:
<button onclick="goto()" style="
background-color: #575757;
color: white;
border: none;
"> Suchen </button>
<script>
function goto(){
window.parent.HYPE.documents['index'].customData.count = 0;
window.parent.HYPE.documents['index'].customData.searchArray = [];
console.log(parent.document.getElementById("Input1").value)
console.log("inside goto")
infos = [];
infosFull = [];
scenes = [];
scenes = window.parent.HYPE.documents['index'].sceneNames().toString().split(",")
console.log("before loop")
for(let j = 0; j != scenes.length; j++){
console.log("inside loop 1")
console.log(j)
window.parent.HYPE.documents['index'].showSceneNamed(scenes[this.j])
infoListe = window.parent.HYPE.documents['index'].getElementById("Infos" + j).textContent.toString()
console.log(infoListe)
infos = this.infoListe.split(",")
console.log("before loop2")
for (let i = 0; i < infos.length; i++){
console.log("inside loop2")
infosFull.push({
"Keywords": infos[i],
"Scene": scenes[j]
})
}
}
console.log(infosFull)
console.log(scenes)
}
</script>
I tried ur method, but didn't work as well. I have another project that works, where I also get the text from the input with the same line of code as here
should work too ...
can you verify that window.parent.HYPE.documents['index'] exists when calling ...
if your reference is correct the case may be that the Hypedoc is not yet built. then the road to go would be make use of Hypes Events in this case HypeDocumentLoad.
Thanks for you help. Still can't get it to work...
Sadly I cannot share the files as they contain confidential data. But I can show the whole script.
input:
<input id="Input1" type="text" style="width: 250px; height: 25px; border-top: none; border-left: none; border-right: none; background-color: white;" placeholder="Suche...">
</input>
script:
<button onclick="goto()" style="
background-color: #575757;
color: white;
border: none;
"> Suchen </button>
<script>
function goto(){
window.parent.HYPE.documents['index'].customData.count = 0;
window.parent.HYPE.documents['index'].customData.searchArray = [];
console.log(window.parent.HYPE.documents['index'].getElementById("Input1").value)
console.log("inside goto")
infos = [];
infosFull = [];
scenes = [];
scenes = window.parent.HYPE.documents['index'].sceneNames().toString().split(",")
console.log("before loop")
for(let j = 0; j != scenes.length; j++){
console.log("inside loop 1")
console.log(j)
window.parent.HYPE.documents['index'].showSceneNamed(scenes[this.j])
infoListe = window.parent.HYPE.documents['index'].getElementById("Infos" + j).textContent.toString()
console.log(infoListe)
infos = this.infoListe.split(",")
console.log("before loop2")
for (let i = 0; i < infos.length; i++){
console.log("inside loop2")
infosFull.push({
"Keywords": infos[i],
"Scene": scenes[j]
})
}
}
console.log(infosFull)
console.log(scenes)
}
</script>
I'm able to type into the input before I run this script, so I assume it exists...
I have another project where I use the exact same code to get the value from an input, there it works fine.
as you can't share the setup ... just log out your path ...
console.log(window.parent)
it does exist ...ok then
console.log(window.parent.HYPE.documents['index'])
the HypeInstance does exist? great next step
console.log(window.parent.HYPE.documents['index'].getElementById("Input1"))
if any of those does not log what you expect ...then expect the html-structure in the browser and see what the real setup is ...
Depending on the setup, it could also be a CORS-related problem ...
////////////
btw there's no need to share the productionfile, but a samplesetup ...would do fine
Use postMessage… or Hype Global Behavior
We are assuming that ;
The parent page (index.html ) has the html button.
And also has an iframe with the script to your second html file.
The second html file
Has a rectangle with the script in its innerHTML
If this is the case your code should work. To test in the browser from the local file system you will likely need to ( in Safari) go to the Developers menu ( turn on in Safari->Settings -> Advanced Tab. and check the Show developer menu, which will show up in the Safari menu bar) and temporarily disable cross origin restrictions.
If you are actually putting both the html button and the script in a single project and not using an iFrame
i.e the button inside one Rectangle innerHTML and the script either inside the same Rectangle or in another one (same scene ) then it will not work and you would simply just use
hypeDocument.getElementById('id'). or document.getElementById('id')
and
window.parent.HYPE.documents['index'].customData.count = 0;
window.parent.HYPE.documents['index'].customData.searchArray = [];
should be
hypeDocument.customData.count = 0;
hypeDocument.customData.searchArray = [];
This would be the same case if you had this setup and was then using this html project as a src for an iframe. Since every thing you are accessing is in a single doc.
Thank y'all for helping. I was able to solve the problem with
document.getElementById()
Best regards Spaeni