We Keep Coding

R Shiny App access variables from embedded Jotform HTML code with javascript

I have created a form with Jotform that I would like to embed in my R Shiny App.
Using shinyjs (?), I would like to access the information filled in the form by the user for using it somewhere else in my Shiny App.
For example, in the minimal example here below, there is a textbox to fill with phone number : can a javascript piece of code allow me to print the phone number in the server shiny function ?
library(shiny)
library(shinyjs)
ui <- fluidPage(
myform
)
server <- function(input, output, session) {
### how can I access the phone number stored in the form ?
# runjs('var phone_number = ???????;')
# print(input$phone_number)
}
shinyApp(ui = ui, server = server)
where myform is the HTML code of the form built with Jotform :
myform <- HTML('<script src="https://cdn01.jotfor.ms/static/prototype.forms.js?3.3.39102" type="text/javascript"></script>
<script src="https://cdn02.jotfor.ms/static/jotform.forms.js?3.3.39102" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.js"></script>
<script type="text/javascript"> JotForm.newDefaultTheme = true;
JotForm.extendsNewTheme = false;
JotForm.singleProduct = false;
JotForm.newPaymentUIForNewCreatedForms = false;
JotForm.newPaymentUI = true;
JotForm.init(function(){
/*INIT-START*/
setTimeout(function() {
$(\'input_11\').hint(\'ex: myname#example.com\');
}, 20);
if (window.JotForm && JotForm.accessible) $(\'input_6\').setAttribute(\'tabindex\',0);
/*INIT-END*/
});
JotForm.prepareCalculationsOnTheFly([null,null,null,null,null,null,{"name":"requestingInformation","qid":"6","text":"Requesting Information Regarding","type":"control_textarea"},{"name":"7","qid":"7","text":"Submit Form","type":"control_button"},null,null,{"name":"name","qid":"10","text":"Name","type":"control_fullname"},{"name":"email11","qid":"11","subLabel":"example#example.com","text":"E-mail","type":"control_email"},{"name":"phoneNumber12","qid":"12","text":"Phone Number","type":"control_phone"},{"name":"clickTo","qid":"13","text":"Information Request","type":"control_head"}]);
setTimeout(function() {
JotForm.paymentExtrasOnTheFly([null,null,null,null,null,null,{"name":"requestingInformation","qid":"6","text":"Requesting Information Regarding","type":"control_textarea"},{"name":"7","qid":"7","text":"Submit Form","type":"control_button"},null,null,{"name":"name","qid":"10","text":"Name","type":"control_fullname"},{"name":"email11","qid":"11","subLabel":"example#example.com","text":"E-mail","type":"control_email"},{"name":"phoneNumber12","qid":"12","text":"Phone Number","type":"control_phone"},{"name":"clickTo","qid":"13","text":"Information Request","type":"control_head"}]);}, 20);
</script>
<style type="text/css">#media print{.form-section{display:inline!important}.form-pagebreak{display:none!important}.form-section-closed{height:auto!important}.page-section{position:initial!important}}</style>
<link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?themeRevisionID=5f30e2a790832f3e96009402"/>
<link type="text/css" rel="stylesheet" href="https://cdn02.jotfor.ms/css/styles/payment/payment_styles.css?3.3.39102" />
<link type="text/css" rel="stylesheet" href="https://cdn03.jotfor.ms/css/styles/payment/payment_feature.css?3.3.39102" />
<style type="text/css" id="form-designer-style">
/* Injected CSS Code */
.form-label.form-label-auto {
display: inline-block;
float: left;
text-align: left;
}
/* Injected CSS Code */
</style>
<form class="jotform-form" action="https://submit.jotformeu.com/submit/230374328498363/" method="post" name="form_230374328498363" id="230374328498363" accept-charset="utf-8" autocomplete="on"><input type="hidden" name="formID" value="230374328498363" /><input type="hidden" id="JWTContainer" value="" /><input type="hidden" id="cardinalOrderNumber" value="" />
<div role="main" class="form-all">
<style>
.form-all:before
{
background: none;
}
</style>
<ul class="form-section page-section">
<li id="cid_13" class="form-input-wide" data-type="control_head">
<div class="form-header-group header-large">
<div class="header-text httal htvam">
<h1 id="header_13" class="form-header" data-component="header">Information Request</h1>
</div>
</div>
</li>
<li class="form-line" data-type="control_phone" id="id_12"><label class="form-label form-label-left form-label-auto" id="label_12" for="input_12_area"> Phone Number </label>
<div id="cid_12" class="form-input" data-layout="half">
<div data-wrapper-react="true"><span class="form-sub-label-container" style="vertical-align:top" data-input-type="areaCode"><input type="tel" id="input_12_area" name="q12_phoneNumber12[area]" class="form-textbox" data-defaultvalue="" autoComplete="section-input_12 tel-area-code" value="" data-component="areaCode" aria-labelledby="label_12 sublabel_12_area" /><span class="phone-separate" aria-hidden="true"> -</span><label class="form-sub-label" for="input_12_area" id="sublabel_12_area" style="min-height:13px" aria-hidden="false">Area Code</label></span><span class="form-sub-label-container" style="vertical-align:top" data-input-type="phone"><input type="tel" id="input_12_phone" name="q12_phoneNumber12[phone]" class="form-textbox" data-defaultvalue="" autoComplete="section-input_12 tel-local" value="" data-component="phone" aria-labelledby="label_12 sublabel_12_phone" /><label class="form-sub-label" for="input_12_phone" id="sublabel_12_phone" style="min-height:13px" aria-hidden="false">Phone Number</label></span></div>
</div>
</li>
<li class="form-line" data-type="control_button" id="id_7">
<div id="cid_7" class="form-input-wide" data-layout="full">
<div data-align="auto" class="form-buttons-wrapper form-buttons-auto jsTest-button-wrapperField"><button id="input_7" type="submit" class="form-submit-button submit-button jf-form-buttons jsTest-submitField" data-component="button" data-content="">Submit Form</button></div>
</div>
</li>
<li style="display:none">Should be Empty: <input type="text" name="website" value="" /></li>
</ul>
</div>
<script>
JotForm.showJotFormPowered = "new_footer";
</script>
<script>
JotForm.poweredByText = "Powered by Jotform";
</script><input type="hidden" class="simple_spc" id="simple_spc" name="simple_spc" value="230374328498363" />
<script type="text/javascript">
var all_spc = document.querySelectorAll("form[id=\'230374328498363\'] .si" + "mple" + "_spc");
for (var i = 0; i < all_spc.length; i++)
{
all_spc[i].value = "230374328498363-230374328498363";
}
</script>
<div class="formFooter-heightMask"></div>
<div class="formFooter f6 branding21">
<div class="formFooter-wrapper formFooter-leftSide"><img class="formFooter-logo" src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo-white.svg" alt="Jotform Logo" style="height: 44px;"></div>
<div class="formFooter-wrapper formFooter-rightSide"><span class="formFooter-text">Now create your own Jotform - It\'s free!</span><a class="formFooter-button" href="https://www.jotform.com/?utm_source=formfooter&utm_medium=banner&utm_term=230374328498363&utm_content=jotform_button&utm_campaign=powered_by_jotform_le" target="_blank">Create your own Jotform</a></div>
</div>
</form><script type="text/javascript">JotForm.ownerView=true;</script><script type="text/javascript">JotForm.forwardToEu=true;</script><script src="https://cdn.jotfor.ms//js/vendor/smoothscroll.min.js?v=3.3.39102"></script>
<script src="https://cdn.jotfor.ms//js/errorNavigation.js?v=3.3.39102"></script>')
If anyone can help, I would be very grateful !
Thanks in advance

Multi uploaded video with multi dynamic progress bar

I have <input type="file" multiple /> What I've tried to do is when I select multiple videos, and for each one of them I want:
=> a dynamic progress bar.
=> input field(so the user can change the video name).
=> input type image(default video image).
=> save button (it will be clickable if the user add name value or default image, otherwise will be disabled).
please open this image to see what I mean
what I've tried:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Upload JavaScript with Progress Ba | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="shortcut icon" href="#" />
</head>
<body>
<div class="wrapper">
<header>File Uploader</header>
<form action="#">
<input class="file-input" type="file" name="file" hidden multiple />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse videos to Upload</p>
</form>
<section class="progress-area"></section>
<section class="uploaded-area"></section>
</div>
</body>
<script>
const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");
form.addEventListener("click", () => {
fileInput.click();
});
fileInput.onchange = ({ target }) => {
let files = target.files.length;
for (let i = 0; i < files; i++) {
if (files[i]) {
let fileName = target.files[i]["name"];
if (fileName.length >= 12) {
let splitName = fileName.split(".");
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
}
}
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/upload.php");
xhr.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
let fileSize;
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
let progressHTML = `
<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content">
<div class="details">
<span class="name">${target.files[i]["name"]} • Uploading</span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>
`;
uploadedArea.classList.add("onprogress");
progressArea.innerHTML = progressHTML;
if (loaded === total) {
progressArea.innerHTML = "";
let uploadedHTML = `
<li class="row">
<div class="content upload">
<i class="fas fa-file-alt"></i>
<div class="details">
<span class="name">${target.files[i]["name"]} • Uploaded</span>
<span class="size">${fileSize}</span>
</div>
</div>
<i class="fas fa-check"></i>
</li>
`;
uploadedArea.classList.remove("onprogress");
uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
}
});
let data = new FormData(form);
xhr.send(data);
}
};
</script>
</html>
upload.php
<?php
if (isset($_FILES['files'])) {
for ($count = 0; $count < count($_FILES['files']['name']); $count++) {
$extension = pathinfo($_FILES['files']['name'][$count], PATHINFO_EXTENSION);
$new_name = uniqid() . '.' . $extension;
move_uploaded_file($_FILES['files']['tmp_name'][$count], 'files/' . $new_name);
}
echo 'success';
}
So, in the controller To get the videos,
function getVideos(Request $request){
$request->all();
return true;
}
The problem is he just gives one progress bar!

Unable to access the DOM which I passed as a string. How to do it by using external function as I defined in the code?

I want to add an event to the "Important" link i.e. When One user clicks the "Important" link, the corresponding card color should be changed and saved in the localstorage but, when I am accessing that DOM file which I passed as a string, I am unable to do it. For e.g. - I can't access to document.getElementsByClassName("noteCard") in function markNotes(index). But at the same time
console.log("Color is not applied") executes successfully. If I am adding document.body.style.backgroundColor = "lightblue"; then also body color changes accordingly, but the I want to change the background color of the card with class "noteCard" only. I am really stuck with it.
Below is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Magic Notes</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Customstyle.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Magic Notes</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/balabhadra.chand/" target="_blank">About me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTitle" type="search" placeholder="Search by title" aria-label="Search">
</form>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search text" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 " id="searchBtn" type="submit">Search</button>
</form>
</div>
</nav>
<h1 class="heading">It's all about magic !!!</h1>
<div class="card" style="width: 1000px;">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Add a title to your note</textarea></span>
</div>
<textarea class="form-control" id="addTitle" aria-label="With textarea"></textarea>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleFormControlTextarea1">Write your Note</label>
<textarea class="form-control" id="addTxt" rows="3"></textarea>
</div>
</form>
<button class="btn btn-primary" id="addBtn">ADD NOTE</button>
</div>
</div>
<hr>
<h5>Your Notes</h5>
<hr>
<div id="notes" class="row container-fluid"></div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="myscript.js"></script>
</body>
Here is my JavaScript code
console.log('MagicNotes')
showNotes();
let addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", function(e) {
let addTxt = document.getElementById("addTxt");
let addTitle = document.getElementById("addTitle");
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
let myObj = {
title: addTitle.value,
text: addTxt.value
}
notesObj.push(myObj)
localStorage.setItem("notes", JSON.stringify(notesObj));
addTxt.value = "";
addTitle.value = "";
showNotes();
});
function showNotes() {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
let html = "";
notesObj.forEach(function(element, index) {
html += `<div class="noteCard card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Title: ${element.title}</h5>
<p class="card-text">${element.text}</p>
<a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
Important
</div>
</div>`;
});
let notesElem = document.getElementById("notes");
if (notesObj.length != 0) {
notesElem.innerHTML = html;
} else {
notesElem.innerHTML = `Please add a note by clicking "ADD NOTE"`;
}
}
function deleteNotes(index) {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
notesObj.splice(index, 1);
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
}
function markNotes(index) {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
document.getElementsByClassName("noteCard").style.color = "lightblue";
console.log("Color is not applied")
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
}
let searchText = document.getElementById('searchTxt');
searchText.addEventListener("input", function(txt) {
let inputVal = searchText.value.toLowerCase();
// console.log('Input event fired!', inputVal);
let noteCards = document.getElementsByClassName('noteCard');
Array.from(noteCards).forEach(function(element) {
let cardTxt = element.getElementsByTagName("p")[0].innerText;
if (cardTxt.includes(inputVal)) {
element.style.display = "block";
} else {
element.style.display = "none";
}
// console.log(cardTxt);
})
})
let searchTitle = document.getElementById('searchTitle');
searchTitle.addEventListener("input", function(title) {
let inputValTitle = searchTitle.value.toLowerCase();
let noteCardsTitle = document.getElementsByClassName('noteCard');
Array.from(noteCardsTitle).forEach(function(element) {
let cardTitle = element.getElementsByTagName("h5")[0].innerText;
if (cardTitle.includes(inputValTitle)) {
element.style.display = "block";
} else {
element.style.display = "none";
}
// console.log(cardTitle);
})
})

You were missing index while fetching element inside markNotes:
function markNotes(index) {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
let noteCard = document.getElementsByClassName("noteCard")[index];
noteCard.style.color = "lightblue";
console.log("Color is applied")
localStorage.setItem("notes", JSON.stringify(notesObj));
//showNotes(); you don't need to add this again
}
complete working code fiddle link

HTML body tag appears blank in the browser while it is not empty [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Please help!
My html body tag appears blank in the browser console while it's not empty. This is happening after I added some javascript tags in the head of my html. It is behaving strange as when I remove all the javascript tags from the head of my html and run my html page in the browser, the javascript code (now removed from the html) appears inside the body tag while it's not even in the entire html. I'm getting frustrated now. Look at my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="res/styles/w3.css">
<link rel="stylesheet" href="res/fonts/icomoon/style.css">
<link rel="stylesheet" href="res/styles/searchform.css">
<link href="res/styles/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
<link href="res/styles/easy-autocomplete.themes.min.css" rel="stylesheet" type="text/css">
<script src="res/js/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
<link href="res/styles/floats.css" rel="stylesheet" type="text/css">
<link href="res/styles/main.css" rel="stylesheet" type="text/css">
<script src="res/js/getMedia.js" type="text/javascript"></script>
<script src="res/js/jsQR.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#go-to-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#go-to-top').fadeIn();
} else {
$('#go-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#go-to-top').click(function () {
$('#content-base').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<script type="text/javascript">
var client;
var camStream;
var QRtarget;
function w3_open() {
document.getElementById("nav-menu").style.width = "100%";
document.getElementById("nav-menu").style.opacity = "0.8";
}
function w3_close() {
document.getElementById("nav-menu").style.width = "0";
document.getElementById("nav-menu").style.opacity = "0";
}
function w3_open_cart() {
document.getElementById("nav-cart").style.width = "100%";
document.getElementById("nav-cart").style.opacity = "0.85";
}
function w3_close_cart() {
document.getElementById("nav-cart").style.width = "0";
document.getElementById("nav-cart").style.opacity = "0";
}
</script>
<script type="text/javascript">
function showDialog(wbtn){
switch(wbtn){
case 1:
$('#div-dialog-cover').fadeIn();
$('#div-dialog-back').slideDown();
trackNum();
dialogCmd = 'tracknum';
break;
case 2:
break;
case 3:
break;
case 4:
$('#div-dialog-cover').fadeIn();
$('#div-dialog-back').slideDown();
genQR();
dialogCmd = 'genqr';
break;
case 5:
$('#div-dialog-cover').fadeIn();
$('#div-dialog-back').slideDown();
scanQR();
dialogCmd = 'scanqr';
break;
case 6:
$('#div-dialog-cover').fadeIn();
$('#div-dialog-back').slideDown();
loginForm();
dialogCmd = 'login';
}
}
function QRfound(QRdata){
setTimeout(function() {
closeDialog(QRdata); // You used `el`, not `element`?
}, 1000);
}
function closeDialog(QRdata = ''){
if (dialogCmd == 'genqr'){
} else if (dialogCmd == 'scanqr') {
$('#scanning').hide();
camStream.getTracks().forEach(track => track.stop());
if (QRdata){
alert(QRdata);
}
readingQR = 0;
$('#canvas').hide();
}
$('#dialog-content').html('');
$('#div-dialog-cover').fadeOut();
$('#div-dialog-back').slideUp();
}
</script>
<script type="text/javascript">
var dialogCmd;
function initVars(){
client = "c";
}
function trackNum(){
document.getElementById('dialog-label').innerHTML = 'Enter tracking number';
$('#div-tracker').css('margin-top', '20px');
$('#dialog-label').css('font-size', '0.8em');
$('#div-dialog-body').css('max-height', '300px');
$('#dialog-content').html('<div id="div-tracker"><form id="form-tracker"><label for="tracking-num">Enter tracking Number:</label><input id="tracking-input" type="text" name="tracking-num" /><br><br><button id="submit-track" onclick="submitTrack()">Track now!</button><br><br><div>OR</div><br><button id="btn-QR-track" onclick="trackQR()">Scan a QR to track</button></form></div>');
}
function scanQR(){
document.getElementById('dialog-label').innerHTML = 'Aim at a QR';
$('#div-dialog-body').css('max-height', '350px');
$('#dialog-content').html('<div id="reader"><div id="scanning"></div><canvas id="canvas" style="width:266px" hidden></canvas></div>');
getCamReady();
}
function genQR(){
$('#dialog-label').css('font-size', '0.7em');
$('#dialog-label').css('padding', '0 2px');
document.getElementById('dialog-label').innerHTML = 'Click to regenerate';
$('#div-dialog-body').css('max-height', '350px');
$('#dialog-content').html('<div id="qrview" onclick="regenQR()"></div>');
if (QRtarget == 1){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=1') ?>) no-repeat center center');
} else if (QRtarget == 2){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=2') ?>) no-repeat center center');
}
$('#qrview').css('background-size', '100%');
}
function regenQR() {
$('#qrview').css('background', '');
if (QRtarget == 1){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=1') ?>) no-repeat center center');
} else if (QRtarget == 2){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=2') ?>) no-repeat center center');
}
$('#qrview').css('background-size', '100%');
}
</script>
<script type="text/javascript">
function loginForm(){
document.getElementById('dialog-label').innerHTML = 'Login here';
$('#div-dialog-body').css('max-height', '270px');
$('#dialog-content').html('<div id="form-container"><form id="login-form"><label for="username">Username/Email :</label><br><input id="username" style="width: 220px;margin-left:25px"/><br><br><label for="password">Password :</label><br><input id="password" type="password" style="width: 220px;margin-left:25px;"/><br><br>Not registered? Click to sign up.</form></div><br><div id="btn-login" onclick="submitLogin()">Submit</div>');
}
function submitLogin(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username.length == 0) {
alert('Please enter a username');
return false;
}
if (username.length < 8) {
alert('Username should be at least 8 characters long.');
return false;
}
if (password.length == 0) {
alert('Please enter a password');
return false;
}
if (password.length < 6) {
alert('Password should be at least 6 characters long.');
return false;
}
var usernameType;
if (ValidateEmail(username)){
usernameType = 'email';
} else {
if (ValidatePhone(username)){
usernameType = 'phone';
} else {
if (ValidateUsername(username)){
usernameType = 'username';
} else {
alert('Invalid username! Please enter a valid e-mail address, phone number or username.');
return false;
}
}
}
if (ValidatePassword(password)){
return submit(usernameType, username, password);
} else {
alert('Invalid password! Please enter a valid password. Valid password is minimum 6 characters long and contains alphabets, digits and special characters e.g. \"##$%!?\/*-_.|\"');
return false;
}
}
function submit(usernameType, username, password){
}
function ValidateUsername(username){
return true;
}
function ValidatePassword(password){
return false;
}
function ValidatePhone(phone){
return false;
}
function ValidateEmail(mail) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)){
return true;
}
return false;
}
function trackQR(){
closeDialog();
showDialog(5);
}
function connectQR(target){
QRtarget = target;
w3_close();
showDialog(4);
}
</script>
<title>cart</title>
</head>
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" id="nav-menu" style="z-index:1006;">
<button onclick="w3_close()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;">Close ×</button>
My Account
My cart
Track my order
Feedback & Dispute
Invite a Friend
About
Contact
</div>
<!-- -->
<!-- cart -->
<div class="w3-sidebar w3-bar-block" id="nav-cart" style="z-index:1006;">
<button onclick="w3_close_cart()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;">Close ×</button>
<div style="width: 100%; height: 5%; background-color:red;font-size:0.7em;padding-left:40px;">My cart</div>
My Account
My cart
Link 3
</div>
<!------------>
<!-- dialog new -->
<div id="div-dialog-cover">
</div>
<div id="div-dialog-back">
<div id="div-dialog-close-back">
<div id="dialog-close-btn">
<span class="icon-cancel-circle" onclick="closeDialog()"></span>
</div>
</div>
<div id="div-dialog-body">
<div id="dialog-label"></div>
<div id="dialog-content" style="text-align:center">
</div>
</div>
</div>
<!------------>
<div id="header" class="header">
<div id="h-top-p">
<div id="h-top-menu" class="button" onclick="w3_open()">
<div class="icons">
<i class="icon-menu"></i>
</div>
</div>
<div id="div-wallet">
<div class="assets-main-div">
<span id="wallet" class="icon-coin-dollar" style="font-size: 1.5em"></span>
<div class="assets-vals-out">
<div class="asset-val-div">
1300
<div class="asset-add-div">
+
</div>
</div>
</div>
</div>
</div>
<div id="div-orders-left">
<div class="assets-main-div">
<span id="price-tag" class="icon-price-tags"></span>
<div class="assets-vals-out">
<div class="asset-val-div">
100
<div class="asset-add-div">
+
</div>
</div>
</div>
</div>
</div>
</div>
<div id="h-middle">
<div id="h-middle-logo">
<img id="main-logo" src="res/imgs/title.png">
</div>
</div>
<div id="h-bottom">
<div id="w-button-container">
<div id="w-button-1" class="w-button" onclick="showDialog(1)">
<div class="w-icons">
<span id="w1" class="icon-target2"></span>
</div>
</div>
<div id="w-button-2" class="w-button">
<div class="w-icons">
<span id="w2" class="icon-document-add"></span>
</div>
</div>
<div id="w-button-3" class="w-button">
<div class="w-icons">
<span id="w3" class="icon-star-full"></span>
</div>
</div>
<div id="w-button-4" class="w-button" onclick="showDialog(4)">
<div class="w-icons">
<span id="w4" class="icon-qrcode"></span>
</div>
</div>
<div id="w-button-5" class="w-button" onclick="showDialog(5)">
<div class="w-icons">
<span id="w5" class="icon-camera"></span>
</div>
</div>
</div>
</div>
</div>
<div id="content-base" class="content-base">
</div>
<div id="footer" class="float-footer">
<div class="footer-part">
<span class="icon-bell"></span>
</div>
<div class="footer-part">
<span class="icon-envelope"></span>
</div>
<div class="footer-part">
<span class="icon-gift"></span>
</div>
</div>
<div id="go-to-top" onclick="scroll2top()">
^
</div>
<a href="#" class="float" id="menu-share">
<i class="icon-chat-bubble-dots"></i>
</a>
<ul>
<li><a href="#">
<i class="icon-phone"></i>
</a></li>
<li><a href="#">
<i class="icon-bubbles3"></i>
</a></li>
</ul>
</body>
</html>

The problem is arising because of JavaScript code between line 123-163. Ensure proper parenthesis and syntax.Hope this helps.

How do I randomize images and audio while making sure to keep divs attatched in Javascript?

This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}

I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.

When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");