Syntax error in WordPress shortcode PHP file - php

Question

I am trying to register a WordPress shortcode.
I have a PHP return statement that includes HTML. Inside the HTML, I have a javascript onclick function. Visual Studio Code is throwing a syntax error which is, unexpected 'frame' (T_STRING), expecting ',' or ';'
I have read other articles on Stack Overflow and I have tried escaping single quotes that are inside the string but I could be inaccurately escaping. Below is some raw code without any escaping.
I understand the code below may not be pretty, but all help is appreciated nonetheless.
<?php
function torque_hello_world_shortcode() {
return '<div class="description pagecontent simple"></div>
<a onclick="document.getElementById('frame').style.display = document.getElementById('frame').style.display == 'none' ? 'block' : 'none'; return false;"><img class="someclass" src="#" alt="alt text" style="width:60px;height:60px;cursor:pointer !important;">
<p class="something" style="cursor:pointer !important;">text! <span class="otherclass" style="cursor:pointer !important;">more text</span></p></a>
<div class="description pagecontent simple"></div>';
}
add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

Answer 1

You're mixing single and double quotes in your return statement (on line 2 of the string, you basically close the string and follow it with the word "frame", without using concatenation or even the $ variable sign).
If you open a string with single quotes, a second single quote will close the string. If you need to use single quotes within your string, you need to escape it, with a backslash: echo 'Arnold once said: "I\'ll be back"';
I added backslashes to your code:
<?php
function torque_hello_world_shortcode() {
return '<div class="description pagecontent simple"></div>
<a onclick="document.getElementById(\'frame\').style.display =
document.getElementById(\'frame\').style.display == \'none\' ? \'block\' :
\'none\'; return false;"><img class="someclass" src="#" alt="alt text"
style="width:60px;height:60px;cursor:pointer !important;">
<p class="something" style="cursor:pointer !important;">text! <span
class="otherclass" style="cursor:pointer !important;">more text</span></p></a>
<div class="description pagecontent simple"></div>';
}
add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );