CODEWITHSUNDEEP
javascripthtmlcompiler-errorseslint
Conor James Thomas Warford Hen
Conor James Thomas Warford Hen

Reputation: 325

Resolving "Parsing error: Parenthesized pattern" in pure js

I'm working on a simple assignment for a job training with html and js. There is an online code editor that allows you to run your code and also an "evaluate" button that checks it against several test cases. The behavior of my code is fine, and there are no errors in the console when running it in my browser, but ES lint gives me the following error:

ERROR: Parsing error: Parenthesized pattern feedback.forEach( (fb,i) => { restext += "Feedback " + (i+1) + "
" + fb + "
" } );

The code is as follows:

index.html:

<html>
    <head>
    <script src="script.js" type="text/javascript"> </script>
  </head>
  
  <body> 
    <center> 
    <h1>Feedback for ART OF LIVING session</h1>
    <form>
    <div>Enter the Feedback: 
        <textarea id="feedback"></textarea>
    </div>
    <button id="create" onclick="event.preventDefault(); addFeedback()">Add Feedback</button>
    <br>    
    <button id="view" onclick="event.preventDefault(); displayFeedback()">View Feedback</button>
    </form>  
    </center>
    <div id="result" style="display: none; border:5px; border-color:black; border-style:solid;">
        <h2>Feedback Details</h2>
        <br>
        <h3 id="h3">test</h3>
        <p id="p">ptest</p>
    </div>
  </body>
</html>

script.js:

var feedback = [];

function addFeedback() {
    //console.log("test af"); 
    document.getElementById("result").style.display = "block";
    feedback.push(document.getElementById("feedback").value);
    //console.log(feedback); 
    document.getElementById("h3").innerHTML = "Successfully Added Feedback Details!"; 
    document.getElementById("p").innerHTML = "";
}

function displayFeedback() {
    //console.log("test df");
    document.getElementById("h3").innerHTML = "";
    var restext = "";
    feedback.forEach( (fb,i) => { restext += "Feedback " + (i+1) + "<br>" + fb + "<br>" } );
    document.getElementById("p").innerHTML = restext;
    feedback = [];
    
}

ES lint complains:

ERROR: Parsing error: Parenthesized pattern feedback.forEach( (fb,i) => { restext += "Feedback " + (i+1) + "
" + fb + "
" } );

and the online evaluation complains:

Fail 1 - Testcase Failed org.openqa.selenium.WebDriverException: com.gargoylesoftware.htmlunit.ScriptException: syntax error (file:script.js#16)Build info: version: '2.52.0', revision: '4c2593cfc3689a7fcd7be52549167e5ccc93ad28', time: '2016-02-11 11:22:43'System info: host: 'ip-172-31-45-57', ip: '172.31.45.57', os.name: 'Linux', os.arch: 'amd64', os.version: '4.4.0-1124-aws', java.version: '1.8.0_292'Driver info: driver.version: HtmlUnitDriver

I have been racking my brain at what the error could be and I've come up with nothing. Can anyone spot it?

Upvotes: 0

Views: 3594

Answers (2)

user14550434
user14550434

Reputation:

I just put your code into a code snippet, and it works just fine. No errors in the console, no red squigglies, no nothing. The only thing I could think of would be an ESLint error, something to do with arrow functions and ES6.

var feedback = [];

function addFeedback() {
  //console.log("test af"); 
  document.getElementById("result").style.display = "block";
  feedback.push(document.getElementById("feedback").value);
  //console.log(feedback); 
  document.getElementById("h3").innerHTML = "Successfully Added Feedback Details!";
  document.getElementById("p").innerHTML = "";
}

function displayFeedback() {
  //console.log("test df");
  document.getElementById("h3").innerHTML = "";
  var restext = "";
  feedback.forEach((fb, i) => {
    restext += "Feedback " + (i + 1) + "<br>" + fb + "<br>"
  });
  document.getElementById("p").innerHTML = restext;
  feedback = [];

}
<center>
  <h1>Feedback for ART OF LIVING session</h1>
  <form>
    <div>Enter the Feedback:
      <textarea id="feedback"></textarea>
    </div>
    <button id="create" onclick="event.preventDefault(); addFeedback()">Add Feedback</button>
    <br>
    <button id="view" onclick="event.preventDefault(); displayFeedback()">View Feedback</button>
  </form>
</center>
<div id="result" style="display: none; border:5px; border-color:black; border-style:solid;">
  <h2>Feedback Details</h2>
  <br>
  <h3 id="h3">test</h3>
  <p id="p">ptest</p>
</div>

I found this github issue and the solution seems to be to add this to your ESLint config:

{
  "env": {
    ...
    "es6": true
  },
  ...
}

Upvotes: 1

akabin
akabin

Reputation: 103

It seems to be working fine, but do you get the same error when you replace the feedback.forEach with this?

    feedback.forEach(function(fb,i) { 
        restext += "Feedback " + (i+1) + "<br>" + fb + "<br>" 
    });

Upvotes: 1

Related Questions