常連

添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示されるscriptを実装したいです。
![イメージ説明](6152e3cc57e16ab9e8d1f6b8740f8881.png)

「文字を描く」ボタンを押すと、
「Uncaught ReferenceError: drawText is not defined　at HTMLButtonElement.onclick」 
というエラーが解決できません。。。

また、function loadImage(id)で読み込んでいる画像も出力されません。

```HTML
<div onload="loadImage('preview');">
  <p><canvas id="preview"></canvas></p>
     <p>
        <input type="text" id="canvas_text" value="我輩は犬である">
        <button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
     </p>
</div>
```

```javascript
//キャンバスに画像を描画する
function loadImage(id)
{
    //画像を読み込んでImageオブジェクトを作成する
    var image = new Image();
    image.src = '/images/canvas.png';
    image.onload = (function () {
        //画像ロードが完了してからキャンバスの準備をする
        var canvas = document.getElementById(id);
        var ctx = canvas.getContext('2d');
        //キャンバスのサイズを画像サイズに合わせる
        canvas.width = image.width;
        canvas.height = image.height;
        //キャンバスに画像を描画（開始位置0,0）
        ctx.drawImage(image, 0, 0);
    });
}
//キャンバスに文字を描く
function drawText(canvas_id, text_id)
{
    var canvas = document.getElementById(canvas_id);
    var ctx = canvas.getContext('2d');
    var text = document.getElementById(text_id);
    //文字のスタイルを指定
    ctx.font = '32px serif';
    ctx.fillStyle = '#404040';
    //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
    ctx.textBaseline = 'center';
    ctx.textAlign = 'center';
    //座標を指定して文字を描く（座標は画像の中心に）
    var x = (canvas.width / 2);
    var y = (canvas.height / 2);
    ctx.fillText(text.value, x, y);
}
```

HTML内に<script></script>で囲って上記scriptを書くと正常に動作しましたが、app.jsファイルにscriptを書くとエラーになります。

どこが間違えているのでしょうか？
よろしくお願いします。

<button>タグをクリックするとUncaught ReferenceErrorというエラーが出る。

### 前提・実現したいこと

Reactの練習で自己紹介ページを作っています。
自己紹介編集画面をReactModalを用いて作成しようと試みています。
SAVEボタンを押したときに、データを保存しModalWindowを閉じる処理を同時に行うように実装を行いたかったのですが
うまく行きませんでした。
onCliickの中でコンマを使えないのは知っているのですが、ボタンクリックされたときに2つの処理を実行させたいです。
ちなみにキャンセルボタンは想定通りの動きをし、`this.saveProfile`のみならデータは想定通りに保存されています。
ご教授いただけますと幸いです。

### 該当のソースコード

親コンポーネント
```JavaScript
    openModal = () => {
        this.setState({isModalOpen: true})
    }

    closeModal = () => {
        this.setState({isModalOpen: false})
    }

    render(){
        return (
            <div>
                <h2>Profile</h2>
                <Button
                    label={'Edit Profile'}
                    onClick={this.openModal}
                />
                <EditProfile 
                    openModal = {this.state.isModalOpen}
                    onClose = {this.closeModal}
                />
            </div>
        )
    }
```
子コンポーネント
```JavaScript
render(){
        return(
            <div>
                <ReactModal
                    isOpen = {this.props.openModal}
                >
　　　　　　　　　　　・・・
　　　　　　　　　　　<名前や年齢などのプロフィールをInputで入力します。略>
                    ・・・
　　　　　　　　　　　<Button
                        label={'Save'}
                        onClick = {
                            this.saveProfile,
                            this.props.onClose
                        }
                    />
                    <Button
                        label={'Cancel'}
                        onClick={this.props.onClose}
                    />
                </ReactModal>
            </div>
        )
    }
```

### 試したこと

下記などを参考にonClickで複数の処理の実行ができないか試したのですが、うまく実装することができませんでした。
[https://www.366service.com/jp/qa/b582191adb9bfb525d728951fcbafb7a
](https://www.366service.com/jp/qa/b582191adb9bfb525d728951fcbafb7a)

【React】【ReactModal】onClickで複数の処理を行いたい

あるサイトで下記の様にonclickでページ移動するボタンがあります。
そのボタンをseleniumでクリックし、ページを移動したいのですがなかなか上手くいきません。

```HTML
<form name="ff" id="ff" action="reg.php" method="post" enctype="multipart/form-data" onsubmit="return false;">
<input type="button" value="修正" onClick="A_re(this.form,23);">
<input type="button" value="修正" onClick="A_re(this.form,74);">
<input type="button" value="修正" onClick="A_re(this.form,448);">
<input type="button" value="修正" onClick="A_re(this.form,198);">
</form>
```
参考にさせて頂いたサイトでは、execute_scriptなるもので実行できるとのことでしたができず、こちらに質問させていただきました。
下記がコードです。

```python
browser.execute_script("A_re(this.form,23)")
```

実際のコードではbuttonが100近く有り、最終的にすべてのbuttonをクリックし、クリック先の要素をすべて取得する必要があります。

（1）最初のbuttonをクリック
↓
（2）ページ移動先で要素を取得
↓
（3）前のページに戻る
↓
（4）次のbuttonをクリック
↓
（5）ページ移動先で要素を取得

詳しい方がいらっしゃいましたらアドバイスをいただけないでしょうか？よろしくお願いします。

seleniumでjavascriptのonclickを実行したい

### 実現したいこと

スプレットシートで、Aのボタンを押すと、セルA1にボタンを押した数をカウントする
Bのボタンを押すと、セルB1にボタンを押した回数をカウントする
Cのボタンを押すと、セルC1に、、、と言う風に、同様のボタンを全部で６つ作成したい

### 前提

ネットで探したスクリプトをコピベして1つ目のボタンに登録できたが、2つ目を登録の仕方が分からない。

### 発生している問題・エラーメッセージ

Aボタンに登録したスクリプトは正常に動いたが、Bボタン用のスクリプトをどのように作ればいいのか分からない。プログラミングの知識がないので、どこを触っていいのか分かりません。

### 該当のソースコード

var sheet=SpreadsheetApp.getActiveSheet();
function onClickUp(){
  var cell = sheet.getRange("A1");
  buttonUp(cell);
}

function buttonUp(cell) {
  var value=cell.getValue();
  cell.setValue(value+1);
}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
### 試したこと

ファイルを追加して、同じコードをコピペして、表示するセル番号だけ変更しましたが、onClickUp()が同じなので後に登録したスクリプトしか動きませんでした。なので、onClickUp()にaを足してonClickUpa()してみましたが、「エラー	onClickUp を実行しようとしましたが、削除されました。」というエラーが出ました。

### 補足情報（FW/ツールのバージョンなど）




スプレットシートでカウントするボタンを複数作りたい

### Reactでresetボタンを押すか、送信するときにinput要素内をリセットしたい
Form要素の部分にbuttonを新たに作成しresetボタンを押すとinputの中身がリセットされるようにする。または、inputの内容が送信されると同時に入力した文字がリセットされるようにしたいです。

Form.jsのhandleSubmit関数内でif文の後に、resetする関数を追加してonClickに指定するなどしてみましたが、handleSubmitが働いてリストを追加する処理になってしまいます。

お時間のある方、アドバイスを頂きたいです。

```Appjs
import React, { useState } from 'react';
import Form from './Form';
import List from './List';
import { Title } from './styles';

import shortid from 'shortid';
import { clear } from 'sisteransi';

const App = () => {

  const [todos, setTodos] = useState([
    {
      id: shortid.generate(),
      content: '洗濯をする'
    },
    {
      id: shortid.generate(),
      content: '課題をする'
    },
    {
      id: shortid.generate(),
      content: '御飯を作る'
    }
  ]);

  const addTodo = (content) => {
    const newTodos = [
      ...todos,  //配列に中を展開する
      {
        id: shortid.generate(),
        content
      }
    ]
    setTodos(newTodos)
  };

  //削除
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id))
  };

  return (
    <>
      <Title>Todo App</Title>
      <Form
        todos={todos}
        setTodos={setTodos}
        addTodo={addTodo}
        
      ></Form>
      <List todos={todos} deleteTodo={deleteTodo}></List>
    </>
  );
};



export default App;

```

```Formjs
import React, { useState } from 'react';
import { MyForm } from './styles';
import { Input } from './styles';
import { clear } from 'sisteransi';


const Form = ({ todos, setTodos, addTodo }) => {
  const [value, setValue] = useState('');
  console.log(value)
  const handleSubmit = (e) => {
    e.preventDefault()
    if (value) {
      addTodo(value);
    } else {
      alert('文字を入力して下さい');
    };
   
  };


  return (
    <MyForm onSubmit={handleSubmit}>
      <Input
        type="text"
        onChange={e => setValue(e.target.value)}
      />
      <button
      onClick={}
      >Clear</button>
    </MyForm>
  );
};

export default Form;
```

Reactでformの中をリセットしたい

###前提・実現したいこと
WYSIWYGエディタをオープンソースを使って進めており、
太文字などの装飾ボタンのデザインを自分のcssでするために<form>でダミーボタンを作り、
そのダミーボタンをクリックした際に、WYSIWYGエディタの本命の装飾ボタン（Aタグ）をクリックさせて装飾を反映させる

###発生している問題・エラーメッセージ
クリックイベントは無事拾えているが、そのイベントをトリガーに本命のaタグのクリック処理が実行されない

###該当のソースコード
<form id="decoBold">
    <input type="button" value="太文字"/>
</form>

<script>
    document.getElementById('decoBold').onclick = function(){
        document.getElementById('aタグのID').click();
        return false;
    };
</script>

###試したこと
functionの処理をconsole.logでクリック時の実行自体はされているかを確認した

###補足情報(言語/FW/ツール等のバージョンなど)
できればjsのみで解決したい

JavascriptにてAタグそのものをクリック

初歩的なことかもしれませんが教えて下さい。
```html
<input type="button" value="押" id="RRR" onclick="RanRan();onclick='disabled = true;'">

<audio id="sound">
<source src= "/audio/hogehoge.mp3" type="audio/mp3">
</audio>
```

```javascript

window.addEventListener('load', function(){
	var option = {
	once: true
	};
	document.getElementById("RRR").addEventListener('click', RanRan);});

function RanRan() {
		
	document.getElementById("sound").load();
   	document.getElementById("sound").play();
}

```

#解決したい点

id sound　にあるmp3を鳴らすようにしています。

この状態ですと、押せば押すだけならせるので
最初の１回だけ。または２回だけならせるようにしたいのですがどのように設定すればいいかわかりません。

Jquery の　.one('click', function() {　のようなことをしたいです。

非常に初歩的なことかもしれませんが教えてもらえますと助かります。


※追記してみましたが、これでも何度もなってしまいます。

最初の１回だけJavascriptを実行したい

現在、Javaでfacebookアプリを開発しているのですが、
下記のエラーが出てしまい原因がわからず困っています。
```jsp
<a href="" onclick="document.form.submit();return false;">
</a>
```
上記のonclickのsubmitによって
```jsp
<form action="リンク先" method="POST" name="form">
</form>
```
のリンク先にアクセスしたいのですが、
２つの不具合によりリンク先に飛べません。

下記に問題のページの実際のコードを記載いたします。
```jsp
<form action="YourSelectEngineer?MatchingDetailEngineer" method="POST" name="blueForm<c:out value='${ loop.count }'/>">
      <input type="hidden" name="switch" value="MatchingDetailEngineer">
      <input type="hidden" name="engineerid" value="${ engineerlist.engineerid }">
     <input type="submit" name="sbt<c:out value='${ loop.count }'/>" value="送信" style="visibility:hidden">
      </form>
      <a href="" class="list" onclick="document.blueForm<c:out value='${ loop.count }'/>.sbt<c:out value='${ loop.count }'/>.click();">
          <div class="row p-profile_box_blue c-box_padding20">
              <div class="layout-box">
                  <div class="layout-box_left c-center">
                      <figure>
                          <div class="c-photobox">
                              <img src="${ engineerlist.photo }?width=120&height=120" class="img-circle c-photo">
                          </div>
                      </figure>
                      <div class="c-name">
                      <p>${ engineerlist.name }(${ engineerlist.age })</p>
                      </div>
                  </div>
                  <div class="layout-box_right">
                		<nav class="c-position">
                    		<ul class="nav nav-stacked">
            					<li class="c-matchingbox_info">
                            		<img src="image/position.png" class="c-mini_logo" style="float:left">
                            		<ul class="nav" style="float:left">
                                        <c:if test="${ engineerlist.projectmanager == true }" var="projectmanager"/>
                                    <li><c:if test="${projectmanager}">プロジェクトマネージャー<br></c:if><c:if test="${!projectmanager}"></c:if></li>
                                        <c:if test="${ engineerlist.projectleader == true }" var="projectleader"/>
                                    <li><c:if test="${projectleader}">プロジェクトリーダー<br></c:if><c:if test="${!projectleader}"></c:if></li>
                                        <c:if test="${ engineerlist.engineer == true }" var="engineer"/>
                                    <li><c:if test="${engineer}">システムエンジニア<br></c:if><c:if test="${!engineer}"></c:if></li>
                                        <c:if test="${ engineerlist.programer == true }" var="programer"/>
                                    <li><c:if test="${programer}">プログラマー<br></c:if><c:if test="${!programer}"></c:if></li>
                                        <c:if test="${ engineerlist.director == true }" var="director"/>
                                    <li><c:if test="${director}">ディレクター<br></c:if><c:if test="${!director}"></c:if></li>
                                        <c:if test="${ engineerlist.coder == true }" var="coder"/>
                                    <li><c:if test="${coder}">コーダー<br></c:if><c:if test="${!coder}"></c:if></li>
                                        <c:if test="${ engineerlist.designer == true }" var="designer"/>
                                    <li><c:if test="${designer}">デザイナー<br></c:if><c:if test="${!designer}"></c:if></li>
                                        <c:if test="${ engineerlist.tester == true }" var="tester"/>
                                    <li><c:if test="${tester}">テスター<br></c:if><c:if test="${!tester}"></c:if></li>
                                </ul>
                           </li>
                          <li class="c-matchingbox_info">
                                  <img src="image/duration.png" class="c-mini_logo_year">
                                  ${ engineerlist.years_of_experience }年
                          </li>
                          <li class="c-matchingbox_info c-list-pr_textover">
                                  <img src="image/miniindustry_logo.png" class="c-mini_logo_pr">
                                  <div class="c-miniprbox">
                                  ${ engineerlist.introduction }
                                  </div>
                          </li>
                        </ul>
                      </nav>
                  </div>
              </div>
          </div>
      </a>
```
本来であれば、aタグで囲まれた箇所にカーソルを合わせれば、
プロジェクト名/YourSelectEngineer?MatchingDetailEngineer
との記載がされてリンク先に飛べると思うのですが、
ページの上部に移動するだけでリンク先にアクセスできません。

同じページでこの現象とは別にもうひとつの現象が起こります。
その現象はfacebookのaccessTokenを用いて、
セッション管理のもと、このページにアクセスしてきた際に起こります。
accessTokenを使っているJavaのコードの一部を下記に示します。
```Java
HttpSession ses = request.getSession(true);
        
        long fbid = Long.parseLong(map.get("userId"));
        EntryDao entrydao = new EntryDao();
        try{
        	//新規登録時の処理
        	entrydao.connect();
        	entrydao.insertAccount(beans);//エラーを返したら登録済み
        	int userid = entrydao.selectUserID(fbid).getUserid();
        	ses.setAttribute("userid", userid);
        	entrydao.close();
        	response.sendRedirect("tos.html");
        }catch(Exception ex){
        	ex.printStackTrace();
        	//insert出来なかったときのException内容
        	try{
        		//ログイン済みであるからfbidよりuseridの取得
        		//メインページに移動する
        		//クライアントとしてログイン時
        		int userid = entrydao.selectUserID(fbid).getUserid();
        		ses.setAttribute("userid", userid);
        		int clientid = entrydao.selectClientID(userid).getClientid();
        		ses.setAttribute("clientid", clientid);
        		ClientProfileDao clientdao = new ClientProfileDao();
        		clientdao.connect();
        		clientdao.selectClientProfile(clientid);
        		clientdao.close();
        		entrydao.close();
        		request.getRequestDispatcher("SearchEngineerList?page=1").forward(request, response);
        	}catch(Exception e){
        		e.printStackTrace();
```
これで、先ほどのページにアクセスした直後にaタグで囲まれた部分にカーソルを合わせると、
「上記のクラス?アクセストークン」
といった形でURLに表示されて、クリックすると、
```java
HTTPステータス 500 - Server returned HTTP response code: 400 for URL: 
```
のエラーが出てしまいます。

原因が全くわからず困り果てています。
同じような形式のページ全てで同じ現象が起こります。
何卒よろしくお願いいたします。