Javascript 未捕获引用错误：未在HTMLElement.onclick上定义Oncheckboxclicked

嗨，我正在尝试创建两个单选按钮，当点击时，将显示一个按钮上传文件或链接上传。但在添加单选按钮并使

onclick

功能后，它仍然不起作用

<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>

。

质询配置中的YAML文件包含以下错误-

{{syntaxErrorInYamlFile}

下面是打字稿

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;
  }

}

import{Component，OnInit，ViewChildren，QueryList，Inject}来自“@angular/core”；
从“../../services/auth.service”导入{AuthService}；
从“../../services/api.service”导入{ApiService}；
从“../../services/global.service”导入{GlobalService}；
从“../../services/challenge.service”导入{ChallengeService}；
从'@angular/Router'导入{Router，ActivatedRoute}；
从'@angular/common'导入{DOCUMENT}；
/**
*组件类
*/
@组成部分({
选择器：“应用程序挑战创建”，
templateUrl:'./challenge create.component.html'，
样式URL:['./challenge create.component.scss']
})
导出类ChallengeCreateComponent实现OnInit{
isFormError=false；
isSyntaxErrorInYamlFile=false；
ChallengerCreateForm={
输入文件：null，
文件路径：空
};
syntaxErrorInYamlFile={}；
/**
*身份验证服务公共实例
*/
authServicePublic=null；
/**
*用户是否已登录
*/
isLoggedIn=false；
/**
*路由器公共实例
*/
routerPublic=null；
/**
*选定的宿主团队对象
*/
hostTeam:any=null；
/**
*主办挑战的路线
*/
hostedChallengesRoute='/challenges/me'；
/**
*主办团队的路线
*/
hostTeamsRoute='/teams/hosts'；
/**
*构造器。
*@param-route激活了路由注入。
*@param路由器注入。
*@param authService authService注入。
*@param文件
*@param globalService globalService Injection。
*@param-apiService-apiService-Injection。
*@param challengeService challengeService注入。
*/
构造函数（公共authService:authService，专用路由器：路由器，专用路由：ActivatedRoute，
私有challengeService:challengeService，@Inject（DOCUMENT）私有文档，
专用globalService:globalService，专用apiService:apiService{}
/**
*上的组件已初始化。
*/
恩戈尼尼特（）{
if（this.authService.isLoggedIn（））{
this.isLoggedIn=true；
}
this.authServicePublic=this.authService；
this.routerPublic=this.router；
this.challengeService.currentHostTeam.subscribe（（hostTeam）=>{
this.hostTeam=hostTeam；
如果（！主机组）{
设置超时（（）=>{
this.globalService.showtoos（'info'，'Please select a host team'）；
}, 1000);
this.router.navigate（[this.hostTeamsRoute]）；
}
});
}
挑战者{
if（this.ChallengeCreateForm['input_file']！==null）{
const FORM_DATA:FormData=new FormData（）；
表格_DATA.append（'状态'，'提交'）；
FORM_DATA.append（'zip_configuration'，this.ChallengeCreateForm['input_file']）；
这个.globalService.startLoader（“创建挑战”）；
这个.challengeService.challengeCreate(
此.hostTeam['id']，
表格数据，
).订阅(
数据=>{
this.globalService.stopLoader（）；
this.globalService.showtoos（'success'，'successfully发送给EvalAI管理员以供批准'）；
this.router.navigate（[this.hostedChallengesRoute]）；
},
错误=>{
this.globalService.stopLoader（）；
this.globalService.showtoos（'error'，err.error.error）；
this.isSyntaxErrorInYamlFile=true；
this.syntaxErrorInYamlFile=err.error.error；
},
() => {}
);
}否则{
this.isFormError=true；
this.globalService.showtoos（'error'，'Please Upload File'）；
}
}
handleUpload（活动）{
const files=event.target.files；
如果（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.getElementsByCassName（'file-path'）[0].value=event.target.files[0]['name']；
}否则{
this.isFormError=true；
}
}
Oncheckboxclicked（值：any）{
如果（值==2）{
var urlfield=this.document.getElementById（“prov_url”）；
var buttonshow=this.document.getElementById（“SubmitButton”）；
urlfield.style.display='block'；
buttonshow.style.display='block'；
}如果（值==5）{
var filebutton=this.document.getElementById（“上传文件”）；；
var buttonshow=this.document.getElementById（“SubmitButton”）；
filebutton.style.display='block'；
buttonshow.style.display='block'；
}
返回null；
}
}

错误是

未捕获引用错误：未定义Oncheckboxclicked 在HTMLElement.onclick

您必须使用

（更改）

事件。像贝娄一样使用它

<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>

上传文件
提供链接

此单选按钮的选中状态更改时发出的事件。 仅当值因用户原因而更改时，才会发出更改事件 与单选按钮的交互（与相同的行为）

---

参考他们的

先生，我的代码有什么问题？这只是一个建议，我以为你在学习angular，而没有学习核心javascript。我以前尝试过。错误没有出现，但结果也没有出现，所以我如何检查我调用的函数？？使用like

（change）=“Oncheckboxclicked（$event）”

并在组件

中单击复选框（事件：MdRadioChange）

并使用类似的

事件读取值。值

是的，但现在我的代码是