Uncaught ReferenceError: Oncheckboxclicked is not defined at HTMLElement.onclick

Question

Hi i am trying to create two radio button which when clicked will display either a button to upload a file or a link to upload . but after adding radio button and making onclick function it still doesn't work

<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
<app-header-static></app-header-static>
<div class="web-container" [style.center]="!authService.isAuth">
  <div class="challenge-create-flex">
    <div class="challenge-create-content">
      <section class="ev-md-container text-center ">
        <div class="row">
          <div class="col s12 m9 offset-m3">
              <label id="choose_meth">Please upload zip file or provide the link to it  to create a challenge!</label>
              <mat-radio-group class="smallradio" aria-labelledby="choose_meth">
                <mat-radio-button name="upload_challange" value="2" onclick="Oncheckboxclicked(value)">Upload File</mat-radio-button>
                <mat-radio-button name="upload_challange" value="5" onclick="Oncheckboxclicked(value)">Provide Link</mat-radio-button>
              </mat-radio-group>
            <div class="file-field input-field col s6">
              <form name="ChallengeCreateForm" #ChallengeCreateForm="ngForm" (ngSubmit)="challengeCreate()" novalidate>
                <div class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14" id="upload_file" >
                  <span>Upload File</span>
                  <input name="input_file" (change)="handleUpload($event)"  accept=".json, .zip, .txt" type="file" class="text-dark-black dark-autofill w-400" [(ngModel)]="ChallengeCreateForm['input_file']">
                </div>

                <div class="file-path-wrapper" id="prov_url" >
                  <input  class="file-path validate" name="file_path" type="url">
                  <div *ngIf="isFormError" class="wrn-msg text-highlight fs-12"> Please Upload File </div>
                </div> 

                <div class="align-left reg-control" id="Submitbutton">
                  <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" type="submit" value="Submit">Submit</button>
                </div>

              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s12 m9 offset-m3">
            <i class="fa fa-info-circle"></i>
            To know how to create a challenge using zip file configuration, please see our documentation
            <a href="https://evalai.readthedocs.io/en/latest/challenge_creation.html#challenge-creation-using-zip-configuration" class="highlight-link" target="_blank">here.</a>.
          </div>
        </div>
        <div *ngIf="isSyntaxErrorInYamlFile" class="row">
          <hr class="hr-line">
          <div class="col s12 m9 offset-m3">
            <div class="syntax-wrn-msg text-highlight">
              The YAML file in the challenge configuration contains the following error - <br>
              {{syntaxErrorInYamlFile}}
            </div>
          </div>
        </div>
      </section>

    </div>
    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
  </div>
</div>

<app-footer *ngIf="!authService.isAuth"></app-footer>

and below is typescript

import {Component, OnInit, ViewChildren, QueryList, Inject} from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { ApiService } from '../../services/api.service';
import { GlobalService } from '../../services/global.service';
import { ChallengeService } from '../../services/challenge.service';
import { Router, ActivatedRoute } from '@angular/router';
import {DOCUMENT} from '@angular/common';

/**
 * Component Class
 */
@Component({
  selector: 'app-challenge-create',
  templateUrl: './challenge-create.component.html',
  styleUrls: ['./challenge-create.component.scss']
})
export class ChallengeCreateComponent implements OnInit {

  isFormError = false;
  isSyntaxErrorInYamlFile = false;
  ChallengeCreateForm = {
    input_file: null,
    file_path: null
  };
  syntaxErrorInYamlFile = {};

  /**
   * Auth Service public instance
   */
  authServicePublic = null;

  /**
   * Is user logged in
   */
  isLoggedIn = false;

  /**
   * Router public instance
   */
  routerPublic = null;

  /**
   * Selected Host team object
   */
  hostTeam: any = null;

  /**
   * Route for hosted challenges
   */
  hostedChallengesRoute = '/challenges/me';

  /**
   * Route path for host teams
   */
  hostTeamsRoute = '/teams/hosts';

  /**
   * Constructor.
   * @param route  ActivatedRoute Injection.
   * @param router  Router Injection.
   * @param authService  AuthService Injection.
   * @param document
   * @param globalService  GlobalService Injection.
   * @param apiService  ApiService Injection.
   * @param challengeService  ChallengeService Injection.
   */
  constructor(public authService: AuthService, private router: Router, private route: ActivatedRoute,
              private challengeService: ChallengeService, @Inject(DOCUMENT) private document,
              private globalService: GlobalService, private apiService: ApiService) { }

  /**
   * Component on initialized.
   */
  ngOnInit() {
    if (this.authService.isLoggedIn()) {
      this.isLoggedIn = true;
    }
    this.authServicePublic = this.authService;
    this.routerPublic = this.router;
    this.challengeService.currentHostTeam.subscribe((hostTeam) => {
      this.hostTeam = hostTeam;
      if (!hostTeam) {
        setTimeout(() => {
          this.globalService.showToast('info', 'Please select a host team');
        }, 1000);
        this.router.navigate([this.hostTeamsRoute]);
      }
    });
  }


  challengeCreate() {
    if (this.ChallengeCreateForm['input_file'] !== null) {
      const FORM_DATA: FormData = new FormData();
      FORM_DATA.append('status', 'submitting');
      FORM_DATA.append('zip_configuration', this.ChallengeCreateForm['input_file']);
      this.globalService.startLoader('Creating Challenge');
      this.challengeService.challengeCreate(
        this.hostTeam['id'],
        FORM_DATA,
      ).subscribe(
        data => {
          this.globalService.stopLoader();
          this.globalService.showToast('success', 'Successfuly sent to EvalAI admin for approval.');
          this.router.navigate([this.hostedChallengesRoute]);
        },
        err => {
          this.globalService.stopLoader();
          this.globalService.showToast('error', err.error.error);
          this.isSyntaxErrorInYamlFile = true;
          this.syntaxErrorInYamlFile = err.error.error;
        },
        () => {}
        );
    } else {
      this.isFormError = true;
      this.globalService.showToast('error', 'Please Upload File');
    }
  }

  handleUpload(event) {
    const files = event.target.files;

    if (files.length >= 1) {
      this.isFormError = false;
      this.ChallengeCreateForm['input_file'] = event.target.files[0];
      this.ChallengeCreateForm['file_path'] = event.target.files[0]['name'];
      this.document.getElementsByClassName('file-path')[0].value = event.target.files[0]['name'];
    } else {
      this.isFormError = true;
    }
  }
   Oncheckboxclicked(value: any){
    if (value == 2 ) {
      var urlfield =<HTMLElement>this.document.getElementById("prov_url");
     var buttonshow =<HTMLElement>this.document.getElementById("SubmitButton");
     urlfield.style.display = 'block';
     buttonshow.style.display = 'block';
    }if (value == 5) {
      var filebutton = <HTMLElement>this.document.getElementById("upload_file");;
      var buttonshow =<HTMLElement>this.document.getElementById("SubmitButton");
      filebutton.style.display = 'block';
     buttonshow.style.display = 'block';

    }
    return null;
  }

}

Th error is

uncaught ReferenceError: Oncheckboxclicked is not defined at HTMLElement.onclick

Answer 1

You have to use (change) event. Use it like bellow.

<mat-radio-button name="upload_challange" value="2" (change)="Oncheckboxclicked(value)">Upload File</mat-radio-button>
<mat-radio-button name="upload_challange" value="5" (change)="Oncheckboxclicked(value)">Provide Link</mat-radio-button>

Event emitted when the checked state of this radio button changes. Change events are only emitted when the value changes due to user interaction with the radio button (the same behavior as ).

Refer their DOC for more details