常連

初歩的なことかもしれませんが教えて下さい。
```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を実行したい

添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示される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というエラーが出る。

### 実現したいこと
職員のファイル閲覧状況を把握するサイトを作成しています。
①スプレッドシートには2つのシートがあります。
　　シート1：A列[ファイル名], B列[URL]
　　シート2：A列[タイムスタンプ],B列[職員番号],C列[ファイル名]
②サイトに羅列されているファイル名をクリックすると"シート2"にタイムスタンプ,職員番号,ファイル名が自動的に入力されるようにしたいです。

### 発生している問題・分からないこと
aタグのonclick属性にて、"google.script.run"を用いてスプレッドシートに入力する関数（writeForm）を実行すると、スプレッドシートに値が入力されない（全て）。



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

```GAS
function doGet(e) {

  const officeId = 1234;

  const template = HtmlService.createTemplateFromFile('Table');
  template.deployURL = ScriptApp.getService().getUrl();
  template.formHTML = getFormHTML(officeId);
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

function getFormHTML(ID) {

  var number = ID;
  var sheet = SpreadsheetApp.getActive().getSheetByName("シート1");
  var data = sheet.getDataRange().getValues();
  
  var result ='<p>ファイル一覧</p>'
  result += '<table border="5" class="lisence mb-5" id="targetTable">';

  for(var i=1;i<data.length;i++){
    var test = data[i][0].toString();
    var link = data[i][1].toString();
    var fileName = data[i][0].toString();
    result += '<tr style="text-align: center;">';
    result += '<td><a href="'+ link +'" onclick="google.script.run.writeForm(' + number +","+ test + ')">' + fileName + '</a></td>';
    result += '</tr>';
  }
  result += '</table>';
  return result;  
}

//---------------- writeForm関数:入力されたFormに従い、スプレッドシートに書き込む ------------------------

function writeForm (number,name) {//number,name
  const today = new Date();
  const sheet = SpreadsheetApp.getActive().getSheetByName("シート2");
  const formList = [today,number,name];
  addRecords('シート2', [formList]);
}

//---------------- addRecords関数:指定した'スプレッドシート'の最終行に指定した[要素] を書き込む------

function addRecords(sheetName, records) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(sheetName);
  const lastRow = sheet.getLastRow();
  sheet.getRange(lastRow+1, 1, records.length, records[0].length).setValues(records);
}
```

```html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <form id="tttt" method="POST" action="<?= deployURL ?>">
      <? output._ = formHTML ?>
    </form>
  </body>
</html>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
・変数"test"が数値の場合、google.script.runのwriteForm関数は正常に動作しました。
・変数"test"が文字列の場合、google.script.runのwriteForm関数は正常に動作されず、スプレッドシートに何も入力されません（特にエラーコード等はありません）。
・google.script.runの外でwriteForm関数を実行すると、数値・文字列ともに正常に動作しました。


### 補足
初めての投稿で質問の仕方に不備があればすみません。
様々なサイトを調べましたが、コードを書き始めて日が浅いため解決できませんでした（V8ランタイムのバグ？）。
ファイル名を外に引っ張れたらどうにかなるかと思いましたが未熟で上手くいきませんでした。
ご指南いただければ幸いです。
どうぞよろしくお願いいたします。

【GAS】スプレッドシートに文字列が入力されない

### 前提・実現したいこと

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で複数の処理を行いたい

### 実現したいこと

スプレットシートで、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/ツールのバージョンなど）




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

あるサイトで下記の様に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を実行したい

###前提・実現したいこと
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タグそのものをクリック

### 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;
```