2

I have a button that runs a batch file, which the code is:

<button onclick="window.open('file:///C:/Users/gthornbu/Desktop/TEST/test.bat')">Continue</button>

I can put that directly in the HTML file and it works just fine, however I am inserting this specific piece of code into the file via output.innerHTML and it's not working. I assume the "/" have to be changed, but I have also tried:

<button onclick='window.open('file:///C:\\Users\\gthornbu\\Desktop\\TEST\\test.bat')'>Continue</button>...which also does not work. Any ideas what I'm missing here?

JavaScript I am using:

function novpn() {
  var output = document.getElementById("main");
  var sentence = "<h3>You are not connected to the VPN. In order to proceed, you must sign in and launch 'Network Connect'.</h3></br><button onclick='window.open('file:///C:\\Users\\gthornbu\\Desktop\\TEST\\test.bat')'>Continue</button>";

  output.innerHTML = sentence;
}
6
  • 6
    In your second code you are using single quotes for your onclick attribute, which makes your markup invalid, because you are using single quotes for the file name as well.
    – Markai
    Oct 7, 2015 at 12:57
  • 1
    How are you adding it via innerHTML? Oct 7, 2015 at 12:58
  • 1
    You should already see one problem just by looking at the syntax highlighting of this question. By using single quotes for the attribute and the window.open() that code won't work, because your browsers sees: onclick='window.open(' which is obviously not valid.
    – g00glen00b
    Oct 7, 2015 at 12:58
  • 2
    In adding to @Markai comment, it's better if you use relative paths instead of absolute paths. However, develop web under file:// protocol is a very bad practice. You can mount a local webserver in javascript with nodeJS for example to avoid problems using file protocol, that don't allows tons of things (requests for example) Oct 7, 2015 at 12:59
  • 1
    Can you show the JS code (attempting to use output.innerHTML) so we can see what's going wrong?
    – Paul Roub
    Oct 7, 2015 at 12:59

3 Answers 3

3

You have ' nested within '.

The easy way out is to use ", but escaped, as the inner quote. Then go back to the original URL (with forward slashes):

var sentence = "<h3>You are not connected to the VPN. In order to proceed, you must sign in and launch 'Network Connect'.</h3></br>" +
    "<button onclick='window.open(\"file:///C:/Users/gthornbu/Desktop/TEST/test.bat\")'>Continue</button>";
4
  • Yes, you're a wizard. Same answer i gave 2 hours ago.
    – ebilgin
    Oct 7, 2015 at 15:18
  • 2
    @ebilgin But it explains what is going on a lot better. An answer shouldn't just fix the problem but explain why/how it fixes the problem. Oct 7, 2015 at 15:22
  • @NathanOliver yes you are right. OP asks a JavaScript question without JavaScript codes. 2 hours later OP edited the question he asked. Then Bam!
    – ebilgin
    Oct 7, 2015 at 15:26
  • @PaulRoub not a problem. Your answer quite good for explanation and solution. I'll upvote your answer.
    – ebilgin
    Oct 7, 2015 at 15:27
3

You can declare strings with ", ' characters. If you have to call a function with parameter in html attribute, declaration may become a problem.

You can resolve this with escape character. \

It will escape behaving the character caused. You must add before it.

var str = "string";
var str2 = \""string\"";

str === str2 // true

In your case, you can do it like this.

output.innerHTML = '<button onclick="window.open(\'file:///C:/Users/gthornbu/Desktop/TEST/test.bat\')">Continue</button>'

Working JS Fiddle

http://jsfiddle.net/ebilgin/wLe04pwg/

0

Nesting html markup and javascript code in strings can become an headache to get the single and double quotes right and escaped where needed. Although it allows for some rather rapid application development if you need to maintain this later you might give this solution try.

Instead of figuring out which quote needed to go where I recreated your target html in vanilla javascript commands to create the same result by using different functions and wiring it all together.

I used the document.createElement function to create the html elements needed and the appendChild function to add them to the main element. The button get the function for opening the window attached to the onclick event.

function novpn() {
  var output = document.getElementById("main");
  
  // create the h3 elelement and its content
  var h3 = document.createElement('h3');
  h3.innerHTML = "You are not connected to the VPN. In order to proceed, you must sign in and launch &apos;Network Connect&apos;.";
  
  // the br
  var br = document.createElement('br');
  
  // create the button
  var button = document.createElement('button');
  button.innerHTML = "Continue";
  // the onclick handler can now become
  // a normal javascript function
  button.onclick = function() {
    window.open('file:///C:/Users/gthornbu/Desktop/TEST/test.bat');
  };
  
  // add all created elements to main
  output.appendChild(h3);
  output.appendChild(br);
  output.appendChild(button);
}

// start
novpn();
<div id='main'>
  <div>title</div>
</div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.